Posted on | by liu
想要让文字居下,大家需要了解一些CSS的知识。本文将介绍两种实现方式,分别为使用flexbox和使用vertical-align属性。
首先大家来看一下flexbox的实现方式。大家可以将包裹文字的元素设置为一个flex容器,并使用align-items: flex-end;来将其内部的子元素向底部对齐。例如:
<div class="container">
<p>要居下的文字</p>
</div>
.container {
display: flex;
align-items: flex-end;
height: 100px;
}
上述代码将会让文字在高为100px的容器内底部对齐。
另一种实现方式是使用vertical-align属性。vertical-align属性是用来控制元素内部的行内元素相对于其父元素的垂直对齐方式。大家可以将包裹文字的元素设置为一个inline-block元素,并将其vertical-align属性设置为bottom。例如:
<div class="container">
<p>要居下的文字</p>
</div>
.container {
display: inline-block;
vertical-align: bottom;
height: 100px;
}
上述代码将会让文字在高为100px的容器内底部对齐。
总结一下,大家可以通过使用flexbox或者vertical-align属性来让文字居下。熟练掌握这两种方式,将会使大家的网页开发变得更加丰富多彩。