CSS - 水平放置我的导航栏
CSS - putting my nav bar horizontaly
我是 css/html 的新手,我正在尝试为自己创建一个投资组合网站。
我想将我的 nav_bar 在我的页面中水平居中,就在我的图像下方,但我似乎无法让它工作。
如您所见,nav_bar 当前垂直对齐。
这是我的代码:
.index_navigation li {
overflow: hidden;
text-align: center;
float: center;
padding-right: 20px;
}
.index_navigation a {
font-family: arial;
color: black;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
.center {
width: 50%;
text-align: center;
display: block;
background-color: transparent;
margin-left: auto;
border: 1px solid transparent;
margin-right: auto;
margin-bottom: 1px;
float: center;
}
<div class="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class="center">
<nav class="index_navigation">
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
希望有人能帮助我:)
提前致谢
使用 display:flex;
到 ul
和 justify-content: center;
使其居中
.index_navigation ul{
display:flex;
justify-content: center;
}
.index_navigation li{
overflow: hidden;
text-align: center;
float: center;
padding-right: 20px;
}
.index_navigation a {
font-family: arial;
color:black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.center{
width:50%;
text-align:center;
display:block;
background-color: transparent;
margin-left:auto;
border: 1px solid transparent;
margin-right: auto ;
margin-bottom: 1px;
float:center;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div class ="background_logo">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Background Logo" class ="center" >
<nav class="index_navigation">
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
</body>
</html>
将 li
的显示样式设置为 inline-block
s 并将 text-align:center 应用于其父项。
.index_navigation{
text-align:center;
}
.index_navigation li{
overflow: hidden;
text-align: center;
padding-right: 20px;
display:inline-block;
}
.index_navigation a {
font-family: arial;
color:black;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
.center{
width:50%;
text-align:center;
display:block;
background-color: transparent;
margin-left:auto;
border: 1px solid transparent;
margin-right: auto ;
margin-bottom: 1px;
float:center;
}
<div class ="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class ="center" >
<nav class="index_navigation">
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
您可以使用 <table>
重组菜单。将 <ul>
替换为 <tr>
并将 <li>
替换为 <td>
。
我会这样做:
.background_logo NAV {
float: right;
position: relative;
left: -50%;
}
.index_navigation {
position: relative;
left: 50%;
}
.clearfix {
clear: both;
}
然后添加正确的 clearfix DIV:
<div class ="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class ="center" >
<div class="clearfix"/> <!-- added clearfix -->
<nav class="index_navigation">
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
<div class="clearfix"/> <!-- added clearfix -->
我只是让 li 显示:inline-block 和 ul 用于 text-align:center。
ul {
text-align: center
}
.index_navigation li {
overflow: hidden;
text-align: center;
float: center;
padding-right: 20px;
display: inline-block;
}
.index_navigation a {
font-family: arial;
color: black;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
.center {
width: 50%;
text-align: center;
display: block;
background-color: transparent;
margin-left: auto;
border: 1px solid transparent;
margin-right: auto;
margin-bottom: 1px;
float: center;
}
<div class="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class="center">
<nav class="index_navigation">
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
我是 css/html 的新手,我正在尝试为自己创建一个投资组合网站。
我想将我的 nav_bar 在我的页面中水平居中,就在我的图像下方,但我似乎无法让它工作。
如您所见,nav_bar 当前垂直对齐。
这是我的代码:
.index_navigation li {
overflow: hidden;
text-align: center;
float: center;
padding-right: 20px;
}
.index_navigation a {
font-family: arial;
color: black;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
.center {
width: 50%;
text-align: center;
display: block;
background-color: transparent;
margin-left: auto;
border: 1px solid transparent;
margin-right: auto;
margin-bottom: 1px;
float: center;
}
<div class="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class="center">
<nav class="index_navigation">
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
希望有人能帮助我:)
提前致谢
使用 display:flex;
到 ul
和 justify-content: center;
使其居中
.index_navigation ul{
display:flex;
justify-content: center;
}
.index_navigation li{
overflow: hidden;
text-align: center;
float: center;
padding-right: 20px;
}
.index_navigation a {
font-family: arial;
color:black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.center{
width:50%;
text-align:center;
display:block;
background-color: transparent;
margin-left:auto;
border: 1px solid transparent;
margin-right: auto ;
margin-bottom: 1px;
float:center;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div class ="background_logo">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Background Logo" class ="center" >
<nav class="index_navigation">
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
</body>
</html>
将 li
的显示样式设置为 inline-block
s 并将 text-align:center 应用于其父项。
.index_navigation{
text-align:center;
}
.index_navigation li{
overflow: hidden;
text-align: center;
padding-right: 20px;
display:inline-block;
}
.index_navigation a {
font-family: arial;
color:black;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
.center{
width:50%;
text-align:center;
display:block;
background-color: transparent;
margin-left:auto;
border: 1px solid transparent;
margin-right: auto ;
margin-bottom: 1px;
float:center;
}
<div class ="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class ="center" >
<nav class="index_navigation">
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
您可以使用 <table>
重组菜单。将 <ul>
替换为 <tr>
并将 <li>
替换为 <td>
。
我会这样做:
.background_logo NAV {
float: right;
position: relative;
left: -50%;
}
.index_navigation {
position: relative;
left: 50%;
}
.clearfix {
clear: both;
}
然后添加正确的 clearfix DIV:
<div class ="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class ="center" >
<div class="clearfix"/> <!-- added clearfix -->
<nav class="index_navigation">
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
<div class="clearfix"/> <!-- added clearfix -->
我只是让 li 显示:inline-block 和 ul 用于 text-align:center。
ul {
text-align: center
}
.index_navigation li {
overflow: hidden;
text-align: center;
float: center;
padding-right: 20px;
display: inline-block;
}
.index_navigation a {
font-family: arial;
color: black;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
.center {
width: 50%;
text-align: center;
display: block;
background-color: transparent;
margin-left: auto;
border: 1px solid transparent;
margin-right: auto;
margin-bottom: 1px;
float: center;
}
<div class="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class="center">
<nav class="index_navigation">
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>