CSS有很多种方式可以居中文本,但是如何在居中的文本上添加一个背景呢?下面我们将介绍一种简单易用的方法。
我们可以使用display:flex;和align-items:center;实现文本居中。代码如下:
.container { display: flex; align-items: center; justify-content: center; height: 300px; background-color: #eee; } .text { background-color: #fff; padding:20px; border-radius: 10px; }
其中,.container为父容器,.text为文本。我们将父容器的高度设置为300px,背景颜色为#eee。然后将文本的背景颜色设置为#fff,内部padding为20px,边框圆角半径为10px。
这时,“文本”就已经在容器中居中了,并且背景也已经显示出来。这种方法简单易懂,同时还省去了使用定位等方法的麻烦。
总的来说,通过使用display:flex;和align-items:center;,我们可以简单快速地实现文本居中,并且添加背景也是非常方便的。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。