垂直与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以有效地执行此操作？垂直对齐内联和块元素的最佳实践是什么？

由于

Answer 1

。使用css的最简单方法是使用display属性，如下所示：

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

这假设您的#bar具有某些描述集的高度，其内容应垂直对齐..