css设置文字铺满盒子

要使文字铺满整个盒子，可以使用CSS的display: flex;属性以及对齐属性justify-content: space-around;和align-items: center;。以下是一个简单的例子：

HTML:




<div class="container">
  <div class="text">LAYOUT TEXT</div>
</div>

CSS:




.container {
  width: 300px;
  height: 200px;
  border: 1px solid #000;
  display: flex;
  justify-content: space-around; /* 水平方向布局 */
  align-items: center; /* 垂直方向布局 */
}
 
.text {
  /* 使用flex-grow属性可以使文字撑满整个容器 */
  flex-grow: 1;
  text-align: center; /* 文字水平居中 */
}

这段代码会创建一个宽度为300px、高度为200px的盒子，并在其中居中放置文字，使得文字铺满整个盒子。

css设置文字铺满盒子

评论已关闭

推荐阅读