Question

我想垂直集中＆＃34; red＆＃34;方形与文本。我在div中有一些内部<a>，doens不知道这是否会影响某些内容......下面的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{
    font-size: 26px;
    vertical-align: middle;
}

<强> jsFiddle example

Answer 2

使用伪元素，因为这是纯粹的风格增强。不需要额外的标记，并且您的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 example

Answer 3

如果您要完成的任务是不使用尽可能多的垂直对齐，那么我在没有容器div的情况下完成了相同的效果并将inline-block放在a本身上。

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

用css垂直集中这个的最佳/正确方法是什么？

3 个答案: