CSS vertical-align 属性
vertical-align 属性设置元素的垂直对齐方式。
说明
通常我们需要垂直对齐并排的元素。
CSS提供了一些可实现的方法：有时我用浮动float来解决，有时用position: absolute来解决，有时甚至是“肮脏”地手动添加的margin或padding。
我真的不喜欢这些解决方案。float只对齐元素的顶部，且需要手动清除浮动。绝对定位的元素脱离文档流，所以他们不再影响周围的元素。而用修补性的margin或padding打破了最细微变化的东西。
但这里还有一个选择：vertical-align。我认为它值得我们更多地信任和使用。在技术上，使用vertical-align的布局是一种hack，因为vertical-align不是为这个目的（垂直对齐布局）发明的。它的存在，是用以对齐并排在一起的文本和元素。尽管如此，你还是可以在不同的上下文中，使用vertical-align灵活而精确地对齐相邻元素。元素的大小不必是已知的。元素留在文档流中，所以周围的其他元素可以会根据这个元素受到的改变而做出反应。这使得vertical-align成为一个有价值的选择。
vertical-align的特殊性
但是，vertical-align有时候很操蛋，它会令你抓狂，似乎它在使用中有一些神秘的规则。例如，你可能改变了元素的vertical-align，但没有出现你想要的效果，但行中的其他元素却被改变了！这时我就很想跑到黑暗的角落里挠墙，撕扯我的头发。
不幸的是，大部分关于vertical-align的文章资源都有点浅，特别是关于使用vertical-align来布局的。他们经常误解vertical-align，试图用它垂直对齐一个容器内的所有元素。他们给vertical-align做基本的介绍，并解释如何在非常简单的情况下对齐元素，却不解释棘手的部分。
所以，我给自己设定了目标，希望一次说清垂直对齐的所有行为。我最终通过W3C的CSS规范和一些实例总结得出本文。
所以，让我们来理清vertical-align的游戏规则。
使用vertical-align的条件
vertical-align是用来对齐内联级元素的。
设置为以下display属性的元素，它们都被认为属于内联级元素。
inline,
inline-block or
inline-table (本文中不涉及此种情况)
inline内联元素基本上是包裹文本的标签。
inline-block内联块元素则如它们的名字所示：拥有内联特性的块元素。他们可以有width和height（可能是由自己的内容定义），以及padding、border和margin。
内联级元素彼此紧挨着放在一行中。一旦有更多的元素被放置到当前行中，一个新的行将会在它下面创建。所有这些行有所谓的“行框”，行框中包含所有的内容。不同大小的内容意味着不同高度的行框。在下面的插图中，行框的顶部和底部都是用红线表示的。
可能的值
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | |
| % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
例子：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .dd{ width:1000px; height:100px; border:solid 1px #999; margin:0 auto; text-align:center; } .ee{ vertical-align:middle; display:inline-block; height:100%; width:1px; margin-left:-1px; } .tt{ vertical-align:middle; } </style> </head> <body> <div class="dd"> <span class="ee"></span> <span class="tt">文字居中效果</span> </div> </body> </html> 效果图片：
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知