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

Question

我想用文本垂直集中“红色”方块。我在 div 中有一些内部，不知道这是否会影响某些东西......下面的 css 有效，但似乎每个标签<a>都有太多内容。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{
    font-size: 26px;
    vertical-align: middle;
}

jsFiddle 示例

Answer 2

如果您想要完成的只是不使用尽可能多的垂直对齐，那么我在没有容器 div 并放置inline-blocka 本身的情况下实现了相同的效果。

http://jsfiddle.net/sGgZb/19/

Answer 3

使用伪元素，因为这是纯粹的风格增强。不需要额外的标记，你的 CSS 更干净。

HTML：

<span>Testing...</span>

CSS：

span {
    font-size: 26px;
    padding: 0 0 0 10px;
}
span::before {
    content: " ";
    width: 5px;
    height: 5px;
    display: inline-block;
    background: #f00;
    vertical-align: middle;
}

jsFiddle 示例