html - 使用 css 垂直集中的最佳/正确方法是什么？

Question

我想将带有文本的“红色”方 block 垂直居中。我有一些内心 <a>在 div 内部，不知道这是否会影响某些东西...下面的 css 有效，但似乎有太多 vertical-align: middle;在每个标签中。有人知道如何使用相同的 html 树使它更简单吗？谢谢!

HTML:

<div>
    <a href="#"></a>
</div>
<span>Testing...</span>

CSS:

div{
    display: inline-block;
    margin: 0 3px;
    vertical-align: middle;
}

a{
    width: 5px;
    height: 5px;
    background-color: red;
    display: block;
    vertical-align: middle;

}

span{
    font-size: 26px;
    vertical-align: middle;
}

http://jsfiddle.net/sGgZb/6/

Answer 1

只有 span 需要垂直对齐规则。

span{
    font-size: 26px;
    vertical-align: middle;
}

jsFiddle example