第二回:vertical-align起作用的前提

——探讨各种display值对vertical-align的影响

为什么我设置了
vertical-align
却没作用?

因为,vertical-align起作用有前提条件。

应用于inline水平以及'table-cell'元素。

inline水平

  • inline: <img>, <span>, <strong>, <em>, 未知元素, ...
  • inline-block: <input>(IE8+), <button>(IE8+), ...

'table-cell'元素

  • table-cell: <td>

默认状态下:图片、按钮、文字和单元格。

1. display: 更改元素的显示水平

2. CSS声明更改元素的显示水平

1. 直接display属性设置

<p><img src="小公主.jpg"></p>
p { vertical-align: middle; }

左青虫 右白鼠

匿名inline元素 inline水平元素
左青虫 <img src="小公主.jpg" style="display:block;"> 右白鼠
img { vertical-align: middle; }

2. CSS声明间接改变display水平

你是我的小呀小公主~

<img src="小公主.jpg" style="float:left;"> 你是我的小呀小公主~
img { vertical-align: middle; }

你是我的小呀小公主~

<img src="小公主.jpg" style="position:absolute;"> 你是我的小呀小公主~
img { vertical-align: middle; }

我说的失效不是这一出!

img { vertical-align: middle; }

图片明明vertical-align:middle了,为什么不垂直居中啊?

不是vertical-align:middle没起作用,而是太短,不够居中。

为什么
display:table-cell
却可以呢?

告诉你,起作用的是table-cell自身!

<p><img src="小公主.jpg"></p>
p { display: table-cell; }
img { vertical-align: middle; }

图片照样不局中!

<p><img src="小公主.jpg"></p>
p { display: table-cell; vertical-align: middle; }

图片近似垂直居中!

实战:个数不定文字内容和图片垂直居中对齐

文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
<div class="test-list">
    <span>文字</span>
    <img src="小公主.jpg">
</div>

下回预告:vertical-align与line-height

——有点深度,有点看头