Question

我有这个：<li>+</li>而我正试图将文本置于中心位置。对于水平居中，我使用的是行高。如何使用CSS进行垂直居中？

这是一个演示：

http://jsfiddle.net/d7pXt/

Answer 1

也许您可以使用text-align:center

Answer 2

text-align: center;

看起来你首先想出了更复杂的部分，CSS让它变得非常容易。

Answer 3

use text-align:center;

li {
    background-color: #EEE;
    font-size: 50px;
    line-height: 42px;
    font-family: Georgia, "Times New Roman", Times, serif;
    list-style: none;
    width: 48px;
    height: 48px;
    border-radius: 175px;
    margin: 20px;
    text-align: center;
}

Answer 4

我认为你的横向和纵向令人困惑。你有垂直工作，水平，只需使用：

text-align: center

Answer 5

只需将text-align:center;添加到您的班级：

li {
background-color:#eee;
font-size:50px;
line-height:42px;
font-family:Georgia, "Times New Roman", Times, serif;
list-style:none;
width:48px;
height:48px;
border-radius:175px;
margin:20px;
text-align:center;
}

这是a working fiddle。

Answer 6

最简单的答案是text-align:center。

http://jsfiddle.net/d7pXt/6/

Answer 7

对于水平居中，我使用的是行高。如何使用CSS进行垂直居中？

你有那些倒退。垂直居中将由线高处理。您可以使用text-align: center水平居中。

See the updated jsFiddle.

Answer 8

您可以使用一些padding。

padding:0 0 0 15px;

注意：这确实会略微改变形状。

示例：http://jsfiddle.net/d7pXt/7/

将文本居中于圆形<li> </li>

8 个答案: