1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

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/post/8206.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: