如何將文本放置在div的底部顯示呢？

本文轉載自查看原文 2020-02-04 22:11 1508 博客

摘要:
下文講述將文本放於div的底部的兩種方法，如下所示:

實現思路:
思路1:采用絕對定位的方式，將其放置於div的底部
思路2:使用Line-height屬性將文本放置於div的底部
行高大小設置的計算公式:(height-(font-size/2))x2=***px
(100-(12/2)*2 = 188px;
在web開發中,我們經常需要將div中的文本進行相關的定位，那么下文將通過舉例的方法講述
底部對齊的方法分享

<html>
<head>
<meta charset="utf-8"> 
<title>貓貓教程(www.maomao365.com)</title> 
<style>

.div1{
  height:180px;
  width:180px;
  border:1px solid blue;
  position:relative
}
.div1 p{
  position:absolute;
  bottom:0px;
  padding:0px;
  margin:0px
}

.div2{
  height:100px;
  width:180px;
  border:1px solid blue;
  font-size:12px;
  line-height:188px;
}
</style>
</head>
<body>
 
<div class="div1">
  <p>這里是maomao教程</p>
</div>

<br />
<div class="div2"> 貓貓教程歡迎你 </div>

</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JaveWeb 公司項目（2）----- 類模態窗口顯示DIV並將DIV放置在屏幕正中間網站底部放置備案號 div置於頁面底部 div浮動在頁面底部關於div的滾動條滾動到底部，內容顯示不全的問題。（已解決）一個div居於另一個div底部關於Div適應到頁面底部用CSS讓文字居於div的底部優化網站設計（六）：在文檔底部放置腳本定義或引用 css 圖片底部對齊文本