垂直对齐vertical-align的一些认识
发布在css研究2014年9月17日view:8985
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

前言

一直很纳闷垂直对齐vertical-algintext-align 之间到底是个什么关系。根据之前对这个垂直对齐字面上的了解,一直认为垂直对齐是把文字或者图片垂直对齐其所父框或者顶端对齐;而 text-align 是文本属性,所以其定义的应该是关于文字对齐相关信息。其实都是处于朦胧状态,这几个还不是很熟悉,因此今天来谈谈这两个属性,如持有不同观点,请直说。

因为网站目前在备案,阿里云说备案局需要关闭评论等等的。所以有任何问题直接在html-js评论直奔主题。

垂直对齐vertical-align与text-align对比

对于vertical-align垂直对齐属性,w3c是这么解释的:vertical-align 属性会影响到由内联元素产生的行内框的垂直位置。原文请猛戳 w3c注解

值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
初始值: baseline
应用于: 内联元素 和 表单元格元素
继承性:
百分数: 相对于元素的line-height值
说明: 应用到表单元格时,只能识别:baseline, top, middle 和bottom等值

 

这个 vertical-align 只能应用于行内元素和表单元格元素,因此对于那些块级元素比如div、p之类的就只能呵呵了。我们来看看对比文本对齐属性 text-align

对于text-align属性,w3c是这么解释:text-align 属性让块级元素中的内联文本水平对齐属性,原文请猛戳:w3c注解

值: left | right | center | justify | inherit
初始值: 用户特定的值,同时假如文本读写方向是从左读到右,那么初始值为左,反之亦然.
应用于: 块级元素
继承性:

我们注意到,这个文本对齐属性只能应用于块级元素,所以这个是他们最直接的区别。除非他们用 display 来做变性手术。

一般对于文本对齐属性我们最熟悉的就是应用不外乎就是左对齐、右对齐、居中对齐,它值局限于块级元素中的文本元素对齐,并非真的影响到期构成的框,但是垂直对齐就有点不太一样。

我叫垂直对齐

假如文本属性 text-align 是对文本对齐方式起作用,那么垂直对齐属性就不会对文本对齐方式产生影响,不然这这者的作用重叠了,那w3c明显就是再搬石头扎自己脚。垂直对齐有8大属性值,但是默认的是叫做一个 baseline 基线,这个貌似很熟悉。还记得我们html有一个叫做algin 的标签么,其实就是类似这样的一个作用,是把图像构成的行框跟其包行框的或顶端对齐、基线对齐、居中对齐等。

很多人都会遇到这个问题:“我怎样让这个东西垂直居中,而不是放在元素底部”,但是我设置了 vertical-algin 居然没有作用,这到底是怎么一回事。

垂直对齐属性有会应用到两个元素,一个是行内元素,一个是表单元格元素,因此我们可以通过几个例子来看看 vertical-algin 是如何工作的。

vertical-algin在行内元素

行内元素包括像文本元素和空字符元素以及我们的替换元素。下面我们分别根据上面给定的8个属性值来看看各个属性值的效果:

对于行内元素,垂直对齐的值要根据父元素来给定,如下图是简单的行内元素对齐

基线对齐

假如是替换元素再搁置在里面,那么会变成如下效果

基线对齐

除了一些固定的值不变之外,其他的类似百分比,相对值都是根据父框的高度变化而变化。并且我们所认为的 middle 也并不是垂直居中的,所以假如拼命地想要某一个行内元素居中其父元素,并且用了这个 middle 显然是不可取的。下面是W3C给定各个值的解释:

baseline:一个元素的基线与父元素的基线对齐,这个是默认值,这是在默认段落行高一样的情况下可说,假如是替换元素(比如图像、表单元素)那么就是与图像的基线对齐

sub:一个元素的以父元素的下标基线对齐

super:一个元素的以父元素的上标基线对齐

这两个属性值就像我们写论文的时候在一个引入别人段落出现的上标注释一样。

text-top:一个元素行内框顶端与父元素文字内容区的顶端对齐

text-bottom:一个元素行内框底端与父元素文字内容区的底端对齐

middle:将元素的中点对齐父元素小写字母的中点

top:将其整行后代元素对齐元素顶端

bottom:将其整行后代元素对齐元素底部

px:将元素向上或向下移动一定具体数值

假如你想要一个个看清楚各个属性值,请猛戳这里 vertical-align在行内元素表现

vertical-align在表单元格

vertical-align应用于表格元素时,并不是像行内元素这么随心所欲,这个有点像 HTML 标签自带的 valign,最多就只有4个属性值,分别是 baseline,top,middle,bottom 如下截图:

valign

对于表单元格中的垂直对齐,本意就是让其内容垂直对齐。其四个值如下:

baseline:将单元格基线与其所有行的基线对齐

top:将单元格边界顶端对齐其行顶端边界

middle:将单元格内容对齐行内边距盒子中间,这个就像用 padding:50% 0 构造一个垂直居中.

bottom:将单元格边界底端对齐其行底端边界

如喜欢看见其真面目,请猛戳:vertical-align在行内元素表现

关于应用

对于垂直对齐标签应用,我所知道的更多的是相对图片的垂直对齐,还有一个就是清除display:inline-block 产生的不对齐。一个div包含一张图片和一段文字,我们需要文字居中文字对齐,代码如下

CSS

.content span{ display:inline-block; height:80px; background:#78c0fa; color:#fff;}

HTML

<div class=content>
    <img src=http://img.xiaoho.com/mystar/mini1.jpg height=80 />
    <span>我是行内元素</span>
</div>

效果:

inline-block居中

刚刚不是说所以的行内元素都是基线对齐的么,照道理来说不管是普通的行内元素还是替换元素都是对齐父元素的基线baseline,但是他们自身的行高和高都影响他们的布局。对于格式化的内联元素使用了 display:inline-bolck 使得一个内联元素表现得像一个块级元素的属性且又有行内元素的属性(不换行,标签末尾不带br强行换行符),因此行内块级元素的的文字依然是跟我们常见的div标签的文字都是从左上角往右下角依次书写,对于其增加的高度也是从上往下顶:

height

所以假如给一个元素增加高度是其实单从我们所直观看见的是内容区的外边界开始往下递增。所以也不会奇怪,当在一个元素内插入一张图像,改变行内元素变成行内块级元素,并赋予它与父框等同高度时,它会变得不对齐。其实他们是正确的显示效果,并不是因为display而改变垂直对齐基线。而我们可以通过利用 vertical-algin 改变他们两个相对父框垂直位置。

.content span{ display:inline-block; height:80px;line-height:80px;vertical-align:top; background:#78c0fa; color:#fff;}

效果

css垂直对齐

对于处理空白符。空白符其实就是我们写标签的时候按下enter键 或者是空格键所产生的空白字符,其空文本,所以我们认为看不见,但是浏览器可不是傻瓜,它依然会解析成为一个空字符。所以,我们平常用鼠标可以选中一段看不见段落时,其实是选中了,段落中的空白字符,字符串是 &+nbsp 既然是字符串,那么同意受到文字的大小限制,所以我们要清除这种空白符其实,换个角度就是如何让空白符消失不见。你可以参考一下之前我写过的一篇关于隐藏的文章,css中元素不可见的几种办法

不过假如你很懒,那么可以直接font-size:0来解决上诉问题。

.one{ background:#CCC;}
.two{ background:#ccc; font-size:0}
.one span{ display:inline-block; height:80px; vertical-align:top;line-height:80px; background:#78c0fa; color:#fff;}
.two span{ display:inline-block; height:80px; vertical-align:top;line-height:80px; background:#78c0fa; color:#fff; font-size:16px;}
<div class=one>
    <img src=http://img.xiaoho.com/mystar/mini1.jpg height=80 />
    <span>我是行内元素</span>
</div>
<div class=two>
    <img src=http://img.xiaoho.com/mystar/mini1.jpg height=80 />
    <span>我是行内元素</span>
</div>

css图片垂直居中对齐

假如你想扒开表层看结果,那么轻戳这里~ 图片和文字居中对齐

结语

好了,这只是我的一点认识而已,请各位csser多补充补充,谢谢了。假如你认为这不是个事,那就不是个事儿吧,假如有好的想法,欢迎在评论中拍砖,谢谢了。

还有其实我一直在纠结着那个公众号不能申请个人认证。。。所以对于速查工具,我觉得应该可以去跟前端观察探讨这事。

本文地址:http://xiaoho.com/?p=759

原创文章,转载请注明来自:◎前端路人乙xiaoho.com

(本篇完)

评论
发表评论
2年前
赞了此文章!
2年前

span元素确实设置不了text-align,但是给他的父级块元素设置text-align,span元素就能继承这个text-align了并应用。我不明白为什么。。这是bug吗

4年前

赞,不过我用vertical-algin时都是一个一个试的。。

4年前
WRITTEN BY
DO1路人乙
个人博客:xiaoho.com
TA的新浪微博
PUBLISHED IN
css研究

很喜欢这个前端论坛~所以在自己博客的每一篇原创文章都会在这边跟大家分享一下,暂定就这么多,纯粹的爱好者。

我的收藏