如何将文本放置在div的底部显示呢?

Posted lairui1232000

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将文本放置在div的底部显示呢?相关的知识,希望对你有一定的参考价值。

转自:将文本定位于div的底部的方法 

摘要:
下文讲述将文本放于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>

技术图片

以上是关于如何将文本放置在div的底部显示呢?的主要内容,如果未能解决你的问题,请参考以下文章

在 div 容器底部对齐 div [重复]

当宽度未知时,将图像水平居中并将其垂直放置在 div 内的底部

如何防止 div 文本掉到容器底部?

如何在顶部闪烁的 div 上放置文本

如何在 div 中并排放置图像? (wordpress)

将视图粘贴在协调器布局内的 viewpager 片段的底部