Question

嘿，我有一个列表，其中包含大约20个带有类名的元素，所以5a，5b等。

<ul id="menu">
    <a href="#"><li><span>5a</span></li></a>
    <a href="#"><li><span>5b</span></li></a>
    ...
</ul>

CSS：

#menu li
{
    margin: 15px;
    width: 100px;
    height: 100px;
    text-align: center;
    display: inline-block;
    font-weight: bold;
    color: white;
    font-size: 50px;
    font-family: Calibri;
    border-radius: 2px;
    position: relative;
}

所以it looks like this。

我希望li元素中的文本在中间是垂直的。目前我有一个绝对定位的脏解决方案，但是有没有办法让文本正好位于中间？

Answer 1

如果每li只有一行文字，只需添加line-height即可匹配li的高度。然后，文本将在其容器的100px内垂直居中：

#menu li
{
    line-height: 100px;

    margin: 15px;
    width: 100px;
    height: 100px;
    text-align: center;
    display: inline-block;
    font-weight: bold;
    color: white;
    font-size: 50px;
    font-family: Calibri;
    border-radius: 2px;
    position: relative;
    background:#f44;
}

Working example at JSFiddle

Screenshot of working CSS

如果您需要多行文字，请同时使用display: table-cell和vertical-align: middle;代替line-height: 100px;。这（以及垂直居中的其他技术）描述为here。

Answer 2

text-align: center;最常用于居中文本。 line-height:80px;是将文本置于水平中心。

你的菜单结构似乎有点奇怪。这样的事情比较常见

<div id="menu">
    <ul>
        <li>
            <a href="#"><span>5a</span></a>
        </li>
        <li>
            <a href="#"><span>5b</span></a>
        </li>
    </ul>
</div>

Link to working Fiddle

希望它能回答你的问题：）

Answer 3

我使用这种方法（对于ie8 +）：

<h2> ie8+ </h2>
<ul id="menu" class="menu">
    <a href="#"><li><span>5a</span></li></a>
    <a href="#"><li><span>5b</span></li></a>
    <a href="#"><li><span>5c</span></li></a>
    <a href="#"><li><span>5d</span></li></a>
    <a href="#"><li><span>5e</span></li></a>
</ul>

的CSS：

#menu li
{
    margin: 15px;
    width: 100px;
    height: 100px;
    text-align: center;
    display: inline-block;
    font-weight: bold;
    color: white;
    font-size: 50px;
    border-radius: 2px;
    position: relative;
    background:red;
}
#menu li:after{
    content:'';
    display:inline-block;
    height:100%;
    width:1px;
    overflow:hidden;
    margin:0 0 0 -5px;
    vertical-align:middle;
}
#menu li span{
    vertical-align:middle;
    display:inline-block;
    white-space:normal;
}

方法（对于ie6 +）：

<h2> ie6+ </h2>
<ul id="menu2" class="menu">
    <a href="#"><li><div class="holder"><div>5a</div></div></li></a>
    <a href="#"><li><div class="holder"><div>5b</div></div></li></a>
    <a href="#"><li><div class="holder"><div>5c</div></div></li></a>
    <a href="#"><li><div class="holder"><div>5d</div></div></li></a>
    <a href="#"><li><div class="holder"><div>5e</div></div></li></a>
</ul>

#menu2 li .holder{
    display:table;
    width: 100px;
    height: 100px;
}
#menu2 li .holder > div{
    width:100%;
    display:table-cell;
    vertical-align:middle;
}

对于ie use exprations：

#menu2 li .holder > div { margin-top: expression(this.parentNode.offsetHeight > this.offsetHeight ? ((this.parentNode.offsetHeight-this.offsetHeight)/2 + "px") : "0"); }

按照链接

http://jsfiddle.net/X2e4A/1/

或文字不会增长的简单方法：

.menu li
{
    margin: 15px;
    width: 100px;
    height: 100px;
    text-align: center;
    display: inline-block;
    font-weight: bold;
    color: white;
    font-size: 50px;
    border-radius: 2px;
    position: relative;
    background:red;
    line-height:100px;
}

在listitem中垂直对齐文本

3 个答案: