如何在DIV中对齐UL

I have unordered list inside a div. I use it to create buttons in menu.

我在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>

I want items to be centered vertically in hosting DIV. Also what is best practice to set height for ul or for li in menus like that. Basically I want my button to be larger than text with some IDENTICAL indent from parent div ceiling and floor.

我希望项目在托管DIV中垂直居中。还有，在菜单中为ul或li设置高度的最佳实践是什么?基本上，我想让我的按钮比文本更大，从父div天花板和地板上缩进一些相同的缩进。

5 个解决方案

#1

Allright lets try again: Your div has a height of 50px. If your distance is 10px that leaves us with 30px for the li's.

好的，让我们再试一次:您的div的高度是50px。如果你的距离是10px那么y的距离是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;
}

#2

Change the CSS:

改变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*/
}

You have to also keep the width on the parent. width: 700px;

您还必须保持父节点的宽度。宽度:700 px;

As ul and li is a block level element, it can accept height and width :)

由于ul和li是块级元素，可以接受高度和宽度:)

#3

Use vertical-align.

使用vertical-align。

For details see here

详情在这里看到

#4

Hilarity ensues, you can always try this ugly hack. Also, does anyone know a way to fix this code? Use this code at your own risk, I accept kn ow responsibility for usage of this code :P

接下来，你可以尝试一下这个丑陋的方法。还有，有人知道修复代码的方法吗?在您自己的风险下使用此代码，我接受kn对这段代码使用的责任:P。

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

#5

Whenever I want to do a horizontal menu, I do something like this:

无论何时我想做一个水平菜单，我都会这样做:

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

the CSS:

CSS:

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