CSS让IMG垂直居中
<div style="border:solid 1px #ccc;"><img style="vertical-align:middle;" src="http://imixc.com/content/images/close.png" />用CSS实现图片和文字垂直居中对齐</div><br /><br />
<div style="border:solid 1px #ccc;"><img src="http://imixc.com/content/images/close.png" />这个是没加样式的效果</div><br /><br />
<div style="border:solid 1px #ccc;"><img align=absmiddle src="http://imixc.com/content/images/close.png" />这个是用align=absmiddle实现图片和文字垂直居中对齐</div>
<div style="border:solid 1px #ccc;"><input type="image" id="cibtn" src="http://imixc.com/content/images/close.png" onclick="return false;"/>未实现图片和文字垂直居中对齐</div>
<div style="border:solid 1px #ccc;"><input type="image" id="cibtn" src="http://imixc.com/content/images/close.png" align="absmiddle" onclick="return false;"/>实现图片和文字垂直居中对齐</div>
<div style="border:solid 1px #ccc;"><img src="http://imixc.com/content/images/close.png" />这个是没加样式的效果</div><br /><br />
<div style="border:solid 1px #ccc;"><img align=absmiddle src="http://imixc.com/content/images/close.png" />这个是用align=absmiddle实现图片和文字垂直居中对齐</div>
<div style="border:solid 1px #ccc;"><input type="image" id="cibtn" src="http://imixc.com/content/images/close.png" onclick="return false;"/>未实现图片和文字垂直居中对齐</div>
<div style="border:solid 1px #ccc;"><input type="image" id="cibtn" src="http://imixc.com/content/images/close.png" align="absmiddle" onclick="return false;"/>实现图片和文字垂直居中对齐</div>
AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐
AbsMiddle 图像的中间与同一行中最大元素的中间对齐
Baseline 图像的下边缘与第一行文本的下边缘对齐
Bottom 图像的下边缘与第一行文本的下边缘对齐
Left 图像沿网页的左边缘对齐,文字在图像右边换行
Middle图像的中间与第一行文本的下边缘对齐
NotSet未设定对齐方式
Right图像沿网页的右边缘对齐,文字在图像左边换行
Top图像的上边缘与同一行上最高元素的上边缘对齐
TextTop图像的上边缘与同一行上最高文本的上边缘对齐
查了一下,absmiddle已经被W3C废弃,采用如下方式
<div style="vertical-align:center;height:40px;border:solid 1px #ccc;">
<img style="vertical-align:middle;" src="http://imixc.com/content/images/close.png" alt=""/>
实现图片和文字垂直居中对齐
</div>
<div style="vertical-align:center;height:40px;border:solid 1px #ccc;">
<input type="image" id="cibtn" src="http://imixc.com/content/images/close.png" style="vertical-align:middle;" onclick="return false;"/>
实现图片和文字垂直居中对齐
</div>
</html>
浙公网安备 33010602011771号