怎么让色块中间有字css

在网页设计中，经常需要使用色块来突出文字或信息，而在色块中间添加文字则是一个很常见的需求。下面我们就来介绍一下如何用CSS来实现这个效果。

首先，我们需要先创建一个具有背景色的div，可以使用以下的CSS样式来实现：

div {
    background-color: #f1c40f;
     /*背景色*/width: 200px;
     /*宽度*/height: 100px;
     /*高度*/text-align: center;
     /*水平居中*/line-height: 100px;
     /*垂直居中*/font-size: 24px;
     /*字体大小*/color: #ffffff;
 /*字体颜色*/}

其中，background-color为div的背景色，text-align和line-height用来实现文字的水平和垂直居中，font-size和color则用来设置文字的大小和颜色。

接下来，我们需要在div中添加需要显示的文字，可以使用以下的代码来实现：

这是一段文本

这样就可以将文字放在div中间了，运行代码后效果如下：

如果想要让文字换行，可以使用white-space属性来实现，如下：

div {
    white-space: pre-wrap;
}
    

这样就可以让文字按照原本的格式显示了。上面的代码实现了在色块中间添加文字的效果，当然，灵活运用CSS样式可以实现更多样化的效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！