如何将文本放置在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删除。

猜您在找 怎么让DIV在另一个DIV里靠底部显示？如何让子div在父div盒子中贴底部显示 JaveWeb 公司项目（2）----- 类模态窗口显示DIV并将DIV放置在屏幕正中间网站底部放置备案号 Matlab如何将y轴放置在中间底部漂浮DIV div置于页面底部 div浮动在页面底部 jQuery控制div层的滚动条始终显示在最底部关于div的滚动条滚动到底部，内容显示不全的问题。（已解决）