在这里用 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;
}
在这里用 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;
}
如果您只有一行文本,则可以将 设置line-height
为与 相同的值height
。这适用于任何元素。
哈克,但可能是最简单的方法:
li {
display: table-cell;
vertical-align: center;
}
您将需要添加背景图像来代替列表项项目符号。
如果你知道你总是将一条线居中,你可以匹配height
并且line-height
li {
...
height: 50px;
line-height: 50px;
...
}
放置行高并在文本和边框之间留出间隙是好的。但这不是最佳做法。因为行高不是用于创建边距或填充。它用于在两行文本之间创建间隙(段落的两行之间的间隙)。
所以要让你的任务完成,你必须放一个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. */
}