css 圖片在div中垂直水平居中

admin發表於2017-03-01
原文網址 : https://www.softwhy.com/article-2133-1.html
CSS
讓圖片在一個元素中垂直水平居中這樣的需求在實際應用中還是很多的。

程式碼例項如下:

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

相關文章