垂直对齐vertical-align的一些认识

来源：互联网发布：视频下载加速器软件编辑：程序博客网时间：2024/04/29 02:38

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

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

这个 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图片垂直居中对齐

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

0 0