如何将文本放置在div的底部显示呢?
Posted lairui1232000
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将文本放置在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的底部显示呢?的主要内容,如果未能解决你的问题,请参考以下文章