Question

将文本垂直here与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;
}

您需要添加背景图片来代替列表项目bullet。

Answer 3

如果您知道自己总是以单行为中心，则可以匹配height和line-height

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

Answer 4

尝试使用vertical-align属性：

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

Answer 5

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

因此，要完成任务，您必须设置边距或填充。更好的选择是设置保证金（但这不是一个对齐。只需将保证金放在首位）。并且，将您的文本放入＆＃34; p＆＃34;标签或＆＃34; span＆＃34;标记（无论标记，可用于包装文本）。

HTML code，

<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;
}

如果必须进行verticaly对齐，则以下是代码。

  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. */

}

如何垂直对齐文本？

5 个答案: