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;" οnclick="return false;"/>
  实现图片和文字垂直居中对齐
</div>

</html>

转载于:https://www.cnblogs.com/angushine/archive/2009/06/13/1502760.html