CSS笔记——vertical-align

属性值

1. 线类

baseline、top、middle、bottom
（默认）

2. 文本类

text-top ， text-bottom

3. 上标下标类

sub、super

4. 数值百分比类

20px，2em，20% ...

注意：

百分比值，是相对于line-height计算的。

作用前提

vertical-align应用于inline水平 以及 ‘table-cell’ 元素

inline水平：

inline:

<img>

，

<span>

，

<strong>

，

<em>

…

inline-block:

<input>

( IE8+) ，

<button>

( IE8+) …

table-cell 元素：

<td>

总结起来就是，默认情况下： 图片、按钮、文字、单元格。

失效例子：

1. 为什么图片设置了vertical-align：middele，但没有垂直居中？

解决方法：

line-height设置为容器高度。

2. 图片容器设置了display：table-cell，图片设置了vertical-align：middele，但没有垂直居中？

代码如下：

<p><img src='#'></p>

p{ display: table-cell ;}

img { vertical-align：middele ;}

这里要注意一点，display：table-cell只能作用于自身，对于里面的img是不起作用的，所以，需要修改成如下代码：

p { display: table-cell ; vertical-align：middele ;}

实战小例子：

实现文字内容与图片垂直居中对齐

<div class='test-list'>
<span>文字内容</span>
<img src='./1.jpg'>
</div>

span { display:inline-block; width:200px; vertical-align:middle; }

img {vertical-align:middle;}

总结起来就是，文字和图片分别

vertical-align:middle;

, 再加上文字

display:inline-block;

。

vertical-align && line-height

继续拿图片下方空隙做例子



解决办法：

vertical-align设为 bottom、top、middle都可以。

vertical-align 特别例子

当有两个inline-block元素，其中一个有内容；另一个既没有内容，有没有overflow的非默认属性。它们之间默认是不对齐的。

原理是：

没有内容的元素，其实依旧存在一个空白节点。它的基线，会与另一个有内容的元素最后一行字的基线进行对齐。

解决办法：

给有内容的元素，添加上line-height：0； vertical-align： top / bottom / middle。

vertical-align && 上标、下标

HTML上标

<sup>

HTML下标

<sub>

1.

<sup>

——>vertical-align: super

2.

<sub>

——>vertical-align: sub

这好像并没有什么卵用，在这里仅作知识储备。

vertical-align相邻元素不一的作用机制

当两个相邻的内联元素进行vertical-align属性设置的时候：

如果前一个设置了值，后一个没有进行设置，则会因为基线对齐的缘故，两者表现一样。

如果两个都设置了值，并且是相反的，则会根据设置的值进行展现，互不影响。

实现（近似）垂直居中

html结构

<p>
<img>
<span></span>
</p>

css

p {line-height: 大于图片值的固定值 }

img { vertical-align：middle }

span { vertical-align：middle ; display:inline-block }

vertical-align实际应用

1. 小图标与文字对齐:

图片使用vertical-align**负值**

优点：无兼容性问题

2. 不定尺寸图片 或 多行文字的垂直居中

主体元素 inline-block化；

0宽度 、 100%高度辅助元素；

vertical-align: middle

图片例子



文字例子



文章部分内容总结自：

张鑫旭

视频——“慕课网——CSS深入理解之vertical-align”

论点与版权所有归原作者所有