CSS vertical-align 属性

时间：5年前阅读：5523

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,我们将及时处理。

微信扫码关注

更新实时通知

CSS vertical-align 属性

网友评论