如何对齐CSS导航栏中间的元素？

我需要帮助，以在我的导航栏中间对齐对象，但它很奇怪我不擅长网页设计这是我第一周的学习，但我找不到任何其他来源来弄清楚这一点。如何对齐CSS导航栏中间的元素？

这是我的导航栏

这里是我的CSS代码：

#nav{ 
    display: block; 
    background-color: #fff; 
    width:100%; 
    min-width:1003px; 
    max-height:50px; 
    padding:0; 
    margin: 0; 
    position: absolute; 
    top:0; 
    left: 0; 
    box-shadow: 0px 1px 1px #fff; 
    clear: both; 
} 
#nav ul{ 
    display: inline-block; 
    vertical-align: middle; 
} 
#nav a{ 
    display: inline-block; 
    vertical-align: middle; 
    font-family: Code2; 
    text-decoration: none; 
    color: #000; 
    padding: 11px; 
    clear: both; 
} 
#nav a:hover{ 
    color:#FF2054; 
} 
#nav li{ 
    display: inline; 
} 
#nav img{ 
    clear:both; 
    height:40px; 
    width:40px; 
    content: ""; 
} 
#nav h1{ 
    font-weight: normal; 
} 
.textbox { 
    background:transparent url(http://i.imgur.com/gPoM6WK.jpg) no-repeat 4px 4px; 
    margin:0; 
    margin-top: -4px; 
    max-width:250px; 
    padding-left:23px; 
    display: inline; 
    border:2px solid #999999; 
    height:28px; 
    border-radius: 3pt; 
    font-family: Code2; 
} 
</style>

这是我的HTML代码：

<div id="nav"> 
<ul> 
<li> 
<a href=""><img src="http://a.deviantart.net/avatars/e/v/evilmaysmile.jpg?1" width="50" height="50" /></a> 
</li> 
<li> 
<form action="search.pl" method="get" style="display:inline;"> 
<input name="q" class="textbox" type="text" size="28" placeholder="SEARCH..."> 
</form> 
</li> 
<li> 
<a href="#">BROWSE</a> 
</li> 
<div style="float:right;"> 
<li> 
<a href="#">HOW IT WORKS</a> 
</li> 
<li> 
<a href="" style="">SIGN UP</a> 
</li> 
<li> 
<a href="">LOGIN</a> 
</li> 
</div> 
</ul> 
</div>

在此先感谢。

来源

2015-12-22 Cody Acer

有些事情不对靠近“工作原理” –

我编辑你的HTML标记，但似乎这个问题还没有被修复 –

尝试在CSS使用text-align:center

来源

2015-12-22 07:05:59 HesZrave

没有我需要对齐，中间的对象他们都已经对准中心 –

我米不确定，你究竟是什么意思，你的意思是你的“注册”和“登录”不是放在棕色的颜色栏内？ – HesZrave

不，我需要在那个白色的导航栏中间对齐它们，那棕色的东西实际上是一个背景图片，显然我只是废话这张照片 –

您可以添加text-align:center;到#nav ul像这样：

#nav ul { 
    display: inline-block; 
    vertical-align: middle; 
    text-align: center; 
}

来源

2015-12-22 07:12:02 jono

没有必要为<div style="float:right;"> 看看这个小提琴

https://jsfiddle.net/xfhqtd6k/

来源

2015-12-22 07:22:04

在你的情况下，你可以添加text-align: center;到你的#na v造型

那么这样做是为了摆脱一个UI元素上微胖的你似乎是导致它不会被完全集中

#nav ul:first-of-type { 
    padding: 0; 
}

来源

2015-12-22 07:30:12 MilesStanfield

我编辑了自己的代码一点点。问题出现了，因为我已经改变了你的css标志。

#nav{ 
    display: block; 
    background-color: #fff; 
    width:100%; 
    min-width:1003px; 
    max-height:50px; 
    padding:0; 
    margin: 0; 
    position: absolute; 
    top:0; 
    left: 0; 
    box-shadow: 0px 1px 1px #fff; 
    clear: both; 
} 
#nav ul{ 

    vertical-align: middle; 
} 
#nav a{ 
    display: inline-block; 
    vertical-align: middle; 
    font-family: Code2; 
    text-decoration: none; 
    color: #000; 
    padding: 11px; 
    clear: both; 
} 
#nav a:hover{ 
    color:#FF2054; 
} 
#nav li{ 
    display: inline; 

} 



#nav img{ 
    clear:both; 
    height:40px; 
    width:40px; 
    content: ""; 
} 
#nav h1{ 
    font-weight: normal; 
} 
.textbox { 
    background:transparent url(http://i.imgur.com/gPoM6WK.jpg) no-repeat 4px 4px; 
    margin:0; 
    margin-top: -4px; 
    max-width:250px; 
    padding-left:23px; 
    display: inline; 
    border:2px solid #999999; 
    height:28px; 
    border-radius: 3pt; 
    font-family: Code2; 
}

我已经在div上添加了margin-top来处理它里面的列表并将它内联。

<div id="nav"> 
<ul> 
<li> 
<a href=""><img src="http://a.deviantart.net/avatars/e/v/evilmaysmile.jpg?1" /></a> 
</li> 
<li> 
<form action="search.pl" method="get" style="display:inline;"> 
<input name="q" class="textbox" type="text" size="28" placeholder="SEARCH..."> 
</form> 
</li> 
<li> 
<a href="#">BROWSE</a> 
</li> 

<div style="float:right; margin-top:15px;"> 

<li> 
<a href="#">HOW IT WORKS</a> 
</li> 
<li> 
<a href="" style="">SIGN UP</a> 
</li> 
<li> 
<a href="">LOGIN</a> 
</li> 
</ul> 
</div> 
</div>

来源

2015-12-22 07:59:18

代码的小提琴在这里https://jsfiddle.net/ahmedkhan92/p3x03qu5/ –

如何对齐CSS导航栏中间的元素？

回答

相关问题