css - 如何垂直对齐文本？

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

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

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

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

Answer 3

如果你知道你总是将一条线居中，你可以匹配height并且line-height

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

Answer 4

尝试垂直对齐属性：

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

Answer 5

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

所以要让你的任务完成，你必须放一个margin或一个padding。更好的选择是放置边距（但这不是对齐。只是在顶部放置边距）。此外，将您的文本放入“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. */

}