html - 与 CSS 垂直对齐

Question

我正在尝试垂直对齐 div 标签中的内联元素。这是我的 HTML：

<div class="foo">
    <div id="bar">
        <a href="#">Link 1</a>
    </div>
</div>

这是我的 CSS：

.foo{
    width:200px;
    height:60px;
    background-color:red;
}

.foo #bar{
    text-align:center;
    vertical-align:middle;
}

如何垂直对齐这个锚标签？我是否以正确的方式设置 HTML/CSS 以有效地做到这一点？垂直对齐内联元素和块元素的最佳实践是什么？

谢谢

score 1 · Accepted Answer

.Purest 使用 css 的方法是display像这样使用属性：

.foo { display: table; } 
#bar {
    display: table-cell;
    vertical-align: middle;
}

这是假设你的#bar 有一些描述集的高度，它的内容应该垂直对齐。

1 回答 1