文字居于div底部的方式

CSS中的text-align属性只能控制文字在水平方向的左对齐（left），右对齐（right），居中（center）,控制不了垂直方向的文字位置，对此有以下解决方案在div内部塞占位符标签，把文字挤到下方(不推荐)<div class="div"><div class="place"></div>我是祖父: 下面是爸爸</div><styl

兴趣使然的码仔

12362人浏览 · 2021-12-13 14:30:39

兴趣使然的码仔 · 2021-12-13 14:30:39 发布

CSS中的text-align属性只能控制文字在水平方向的左对齐（left），右对齐（right），居中（center）,控制不了垂直方向的文字位置，对此有以下解决方案

在div内部塞占位符标签，把文字挤到下方(不推荐)

<div class="div">
        <div class="place"></div>
        我是祖父: 下面是爸爸
</div>

<style>
.div { height: 100px; }
.place { height: 70px; }
</style>

不推荐这种方法是因为会增加占位标签，基于剃刀原理“如无必要，勿增实体”，所以放弃这种。

修改行高line-height属性

<div class="div">
        我是祖父: 下面是爸爸
</div>

<style>
.div {
    height: 100px;
    line-height: 170px;
}
</style>

通常行高设置为元素高度的170%合适

使用相对定位控制

父元素设置position: relative，文字元素设置position: absolute,并用上下左右四个属性控制文字位置,设置bottom:0 即可文字局底。

<div class="div">
        <p>我是祖父: 下面是爸爸</p>
</div>
<style>
.div {
    height: 100px;
    background-color: aquamarine;
    position: relative;
    text-align: center;
}

.div p{
    position: absolute;
    bottom: 0px;
    padding: 0;
    margin: 0;
}
</style>