元素在div中底部顯示

admin發表於2017-12-04
原文網址 : https://www.softwhy.com/article-8304-1.html

在實際應用中可能需要將一個元素在一個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{
  height:250px;
  width:250px;
  background:green;
  position:relative;
}
.inner{
  width:50px;
  height:50px;
  background:red;
  position:absolute;
  bottom:0px;
  left:50%;
  margin-left:-25px;
}
</style>
</head>
<body>
<div class="box">
  <div class="inner"></div>
</div>
</body>
</html>

程式碼將內部的div底部居中顯示，實現的原理非常的簡單就是講父元素設定為相對定位，子元素使用絕對定位，然後設定資源在垂直方向是底部對齊，至於居中就是一個數學問題了，非常的簡單不多介紹了。

相關閱讀:

（1）.相對定位參閱CSS的相對定位一章節。 

（2）.絕對定位參閱CSS的絕對定位一章節。

相關文章