如何将容器内的多行文本垂直居中?

如何将容器内的多行文本垂直居中?

子元素多行文本如何垂直居中?

要将容器内的子元素多行文本垂直居中,可以利用以下 CSS 属性:

  • align-items:center; 用于垂直居中容器内的子元素。
  • word-break:break-word; 允许文本在单词边界处自动换行。

示例代码

以下代码示例演示了如何在文本容器中实现子元素多行文本的垂直居中:

.box1 {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  display: flex;
  align-items: center;
  word-break: break-all;
}

以上就是如何将容器内的多行文本垂直居中?的详细内容,更多请关注硕下网其它相关文章!