如何讓圖片在div中垂直水平居中對齊

admin發表於2017-03-05

本章節分享一段例項程式碼，介紹一下如何讓一個圖片在div中實現垂直水平居中。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>    
<html>    
<head>    
<meta charset=" utf-8">    
<meta name="author" content="http://www.softwhy.com/" />    
<title>螞蟻部落</title>  
<style type="text/css">
#box{
  width:500px;
  height:500px;
  line-height:500px;
  background:green;
  text-align:center;
}
#box img{
  vertical-align:middle; 
}
</style>   
</head>  
<body> 
<div id="box"><img src="mytest/demo/tree.jpg"></div>
</body>    
</html>

以上程式碼實現了我們的要求，能夠將div中的圖片設定為垂直水平居中。

下面簡單介紹一下效果實現的主要部分:

設定圖片水平居中使用瞭如下程式碼:

[CSS] 純文字檢視 複製程式碼
text-align:center

實現圖片垂直居中:

div中的程式碼:

[CSS] 純文字檢視 複製程式碼
line-height:500px;

圖片的程式碼:

[CSS] 純文字檢視 複製程式碼
vertical-align:middle;

相關文章