Question

似乎无法做到这一点，我有一个div 200px x 200px和一个h2标签，我想要位于盒子死点的底部，香港专业教育学院尝试垂直对齐中心，但这似乎没有解决问题？我也试过添加相对于盒子的位置然后绝对位置到h2，但我确定这是一个更好的方法？

<div class="box">
<h2>My title</h2>
</div>

.box{
       width: 200px;
       height: 200px;
       background: #dedede;
}

h2{
    text-align: center;
    vertical-align: bottom; 
}

Answer 1

提供了多种解决方案。

首先：将您的CSS更新为：

.box{
    width: 200px;
    height: 200px;
    background: #dedede;
    position:relative;
}

h2{
    text-align: center;
    width:100%;
    position:absolute;
    bottom:0;
}

Answer 2

另一种方式是：

h2{
    text-align: center;
    width:100%;
    line-height:370px;
}

我如何将我的h2标签放在空div的底部？

2 个答案: