如何在DIV内对齐UL

Question

我在div中有无序列表。我用它在菜单中创建按钮。

#tagscontainer
{
    width: 700px;
    height: 50px; 
    margin: auto;
}

#tagscontainer li
{
    margin-right: 1em;
    float: left;
    background: none repeat scroll 0 0 #EEEEEE;
}


<div id="tagscontainer">
<ul>

<li><a href="menu1"> Link 1</a></li>
<li><a href="menu2"> Link 2</a></li>
<li><a href="menu3"> Link 3</a></li>

</ul>
</div>

我想让物品在托管DIV时垂直居中。另外，在这样的菜单中为ul或li设置高度的最佳做法是什么。基本上我希望我的按钮比文本更大，并且从父div天花板和地板开始有一些IDENTICAL缩进。

Answer 1

更改CSS：

#tagscontainer li
{
    background: none repeat scroll 0 0 #EEEEEE;
    height: 25px;
    margin: 0 auto;
    width: 50%; /*these last two are needed for vertical centering*/
}

您还必须保持父级的宽度。 width: 700px;

由于ul和li是块级元素，因此它可以接受高度和宽度：）

Answer 2

好吧让我们再试一次：你的div的高度为50px。如果你的距离是10px，那么我们就可以获得30px的距离。

li {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  float: left;
  background: none repeat scroll 0 0 #EEEEEE;
  height: 30px;
  line-height: 30px;
}

Answer 3

使用vertical-align。

有关详细信息，请参阅here

Answer 4

欢闹随之而来，你可以随时尝试这种丑陋的黑客行为。另外，有没有人知道修复此代码的方法？使用此代码需要您自担风险，我接受使用此代码的责任：P

#tagscontainer li
{
    display: table-cell;
    background: none repeat scroll 0 0 #EEEEEE;
    width: 1%;
    text-align: center;
}

Answer 5

每当我想做横向菜单时，我会这样做：

<ul class="menucontainer">
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>

CSS：

.menucontainer
{
    width: 700px;
    margin: 0 auto;
}
.menucontainer li
{
    display: inline-block;
    margin: 10px;
}
.menucontainer a
{
    display: block;
    padding: 5px;
}