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>

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>

posted @ 2009-06-13 22:15  angushine  阅读(1999)  评论(0)    收藏  举报