[分享]css中div中的文字沉底

在CSS中，我们可以使用标签来创建一个容器，然后在容器中添加文本。但是，我们可能会遇到这样的问题——当文本长度不足时，文本会默认在div容器中垂直居中显示。这时，我们可以利用CSS样式来改变文本的垂直...

在CSS中，我们可以使用

<div class="container">
  <p class="bottom-text">这里是文本，将会显示在容器的底部。</p>
</div> 

在上面的代码中，我们创建了一个div容器，并添加了一个p标签，p标签的文本为“这里是文本，将会显示在容器的底部。” 我们可以使用 CSS 样式将该段文本垂直居下。

.container {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 200px; /* 方便演示 */
  border: 1px solid #000; /* 方便演示 */
}

.bottom-text {
  margin: 0;
} 

在上述代码中，我们对容器使用了flex布局，并采用了以下样式：

• justify-content: center; 表示容器内元素水平居中对齐；
• align-items: flex-end; 表示容器内元素垂直底部对齐；
• height: 200px; 表示容器高度为200px，方便演示；
• border: 1px solid #000; 表示容器边框为1px实线黑色，方便演示。

同时，我们对p标签的样式使用了margin: 0;，将默认的外边距取消掉，以便更好地实现底部对齐。

这样，当我们在div容器中添加任意长度的文本时，文本都会自动沉底显示。这是一种简单而有效的实现方式，可以让页面整体显得更加美观大方。