inline水平
- inline: <img>, <span>, <strong>, <em>, 未知元素, ...
- inline-block: <input>(IE8+), <button>(IE8+), ...
'table-cell'元素
- table-cell: <td>
<p><img src="小公主.jpg"></p>
p { vertical-align: middle; }
左青虫 右白鼠
左青虫 <img src="小公主.jpg" style="display:block;"> 右白鼠
img { vertical-align: middle; }
你是我的小呀小公主~
<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没起作用,而是太短,不够居中。
<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>