CSS讓IMG垂直置中

來源:互聯網
上載者:User
<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>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.