Question

我需要帮助来对齐导航栏中间的对象，但它很奇怪我不擅长网页设计这是我学习的第一周，但我找不到任何其他来源来解决这个问题。< / p>

这是我的导航栏

这是我的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>

提前致谢。

Answer 1

尝试在css上使用text-align:center

Answer 2

您可以将text-align:center;添加到#nav ul，如下所示：

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

Answer 3

不需要<div style="float:right;"> 看看这个小提琴

https://jsfiddle.net/xfhqtd6k/

Answer 4

在您的情况下，您可以将text-align: center;添加到#nav样式

然后执行此操作以消除您似乎拥有的那个导致它不能完全居中的ul元素的额外填充

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

Answer 5

我已经编辑了一下你的代码。问题来了，因为我已经改变了你的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>

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

5 个答案: