什么是最好的/正确的方式垂直集中这与CSS？

问题描述：

我想垂直集中带有文字的“红色”正方形。我在div里面有一些内部的<a>，doens't不知道这是否会影响某些东西......下面的css可以工作，但似乎在每个标签中都有太多的vertical-align: middle;。有人知道如何使用相同的HTML树更简单吗？谢谢！什么是最好的/正确的方式垂直集中这与CSS？

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/

对不起，完全题外话评论，但漂亮的REP-得分:) – 2013-05-08 20:04:35

hahahahaha。所以请不要投票 – Luccas 2013-05-08 20:05:44

这里有一篇相当不错的文章：http://phrogz.net/CSS/vertical-align/index.html – maaachine 2013-05-08 20:09:49

答

只有跨度需要垂直对齐的规则。

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

jsFiddle example

感谢您的回答！但实际上没有，因为：http://jsfiddle.net/sGgZb/16/ – Luccas 2013-05-08 20:07:46

那么在你的新案例中，div也需要它。 – j08691 2013-05-08 20:10:00

非常感谢！但是，这仍然是一个好办法吗？ – Luccas 2013-05-08 20:22:15

答

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

这对于更简洁的代码很好，但不太自然（margin-top：-2.5px），然后委托浏览器计算垂直对齐=） – Luccas 2013-05-08 20:17:02

编辑为使用内联块而不是绝对定位。 :) – aaronburrows 2013-05-08 20:18:26

嗯，但是这是正确的中间？ – Luccas 2013-05-08 20:20:04

答

如果你想完成所有是不使用尽可能多的垂直对齐，然后我在没有容器格的情况下完成相同的效果并且将其放在t上他本身。

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

什么是最好的/正确的方式垂直集中这与CSS？

相关推荐