html - 垂直对齐多行文本到中间

标签 html css

我需要将多行文本居中对齐。这是我正在使用的标记的粗略指南。

<ul>
    <li>
        <a href='#'>This should be centered.</a>
    <li>
</ul>

The element that needs to be centered

因此,正如您从我的图片中看到的那样,“工作”链接应该垂直居中。我用 vertical-align: middle; 设置了宽度和高度。我知道您需要设置行高才能实际工作,但问题就在这里。如果我将行高设置为 72px(元素的高度),那么一些链接会因为占据两行而向下延伸页面。

The broken center

有没有一种方法可以不使用行高将多行文本居中对齐?

最佳答案

使用显示:表格单元格;在你的 li 元素中。

li {
width:200px;
height:200px;
vertical-align:middle;
display:table-cell;
}

这会给你这样的效果:

enter image description here

关于html - 垂直对齐多行文本到中间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7743449/

相关文章:

html - Bootstrap - 设置容器的背景

css - 网站在手机上看起来不太好

html - 我的导航栏显示不正确

javascript - 单击时部分隐藏固定页脚

css - wordpress 中的帖子页面图像无法居中和响应

php - 使用 html [初学者] 在 php 文件中打印一个值

javascript - 使用 JavaScript 淡化 Div

javascript - HTML5、JavaScript 和在 Canvas 中绘制多个矩形

html - 导航栏 HTML CSS 中的下拉菜单中没有任何内容

javascript - 如何链接 HTML 部分?