如何垂直对齐文本？

Question

使用CSS 在此处垂直对齐文本的最简单方法是什么？

<ul>
    <li>Hello</li>
    <li>Bye Bye</li>
    <li>Ciao</li>
</ul>

li {
    border: 1px solid black;
    width: 100px;
    height: 50px;
    margin-bottom: 20px;
    text-align: center;
}

Answer 1

如果只有一行文本，则可以将line-height设置为与height相同的值。 这适用于任何元素。

Answer 2

hacky，但可能是最简单的方法：

li {
    display: table-cell; 
    vertical-align: center;
}

您将需要添加背景图像来代替列表项目的项目符号。

Answer 3

如果您知道总是将单条线居中，则可以匹配height和line-height

li {
    ...
    height: 50px;
    line-height: 50px;
    ...
}

Answer 4

设置行高并在文本和边框之间留出一定的间距是很好的。 但这不是最佳做法。 因为行高不是用于创建边距或填充的。 它用于在两个文本行之间创建间隙（段落的两行之间的间隙）。

因此，要使任务完成，就必须添加边距或填充。 更好的选择是设置边距（但这不是对齐方式。只需将边距放在顶部）。 并且，将您的文本放入“ p”标签或“ span”标签（无论是哪种标签，都可以用于自动换行）。

HTML代码

<ul>
    <li><span>Hello</span></li>
    <li><span>Bye Bye</span></li>
    <li><span>Ciao</span></li>
</ul>

CSS代码

ul li span {
    margin-top: 5px;
}

如果必须进行垂直对齐，则代码如下。

  ul li {
     position: relative;
  }

  ul li span {
      position: absolute;
      top: 50%;
      font-size: 12px; /* change this as your need. */
      line-height: 12px; /* keep this value same as font-size. */
      margin-top: -6px; /* half value from the font-size. */

}

Answer 5

尝试vertical-align属性：

http://www.w3schools.com/css/pr_pos_vertical-align.asp