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

時間 2020-02-05

標籤如何文本放置 div 底部顯示欄目 CSS 简体版

原文原文鏈接

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

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

<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>

相關標籤/搜索