使用 CSS display 属性的解决方案
解决该问题的另一种方法是使用设置为其“表”值的显示属性。
请注意，不需要父元素。
为文本宽度设置背景颜色并将显示设置为“表格”的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
h1 {
display: table;
margin: 0px auto 0px auto;
padding: 3px;
font-size: 24px;
background-color: #30cf52;
color: #fff;
}
</style>
</head>
<body>
<h1>生活终归还得继续。</h1>
</body>
</html>
下一个示例需要一个父元素，因此我们使用 <div> 元素作为容器。
其中我们将 <h1> 元素的显示设置为“inline-flex”，将容器的 text-align 设置为“center”。
为文本宽度设置背景颜色并将显示设置为“inline-flex”的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.container {
text-align: center;
}
h1 {
display: inline-flex;
padding: 3px;
font-size: 24px;
background-color: #4451b3;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<h1>生活终归还得继续。</h1>
</div>
</body>
</html>
在以下示例中，容器和文本的显示都设置为“flex”。
对于容器，我们还使用带有“center”值的 justify-content 属性。
为文本宽度设置背景颜色并将显示设置为“flex”的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.container {
display: flex;
justify-content: center;
}
h1 {
display: flex;
padding: 3px;
font-size: 24px;
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<h1>生活终归还得继续。</h1>
</div>
</body>
</html>
或者，我们也可以使用显示属性的“块”值。
这里也需要一个 flex 父容器。
为文本宽度设置背景颜色并将显示设置为“块”的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
.container {
display: flex;
justify-content: center;
}
h1 {
display: block;
padding: 3px;
font-size: 24px;
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<div class="container">
<h1>生活终归还得继续。</h1>
</div>
</body>
</html>
使用内联元素的解决方案
在下面的示例中，我们在 <h1> 中有一个标题，我们其中添加了一个内联元素 (<span>)。
下一步是在 <span> 元素上设置背景颜色。
内联元素与其内容一样大，这将解决问题。
使用内联元素为文本宽度设置背景颜色的示例：
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
<style>
h1 {
text-align: center;
color: #fff;
}
h1 span {
background-color: #43d9cf;
}
</style>
</head>
<body>
<h1>
<span>生活终归还得继续。</span>
</h1>
</body>
</html>
结果
Lorem Ipsum 只是虚拟文本
在本教程中，我们将演示一些可用于设置背景颜色的方法，背景颜色对应于文本宽度而不是整个元素的宽度。
我们还需要 CSS 属性。
日期：2020-06-02 22:14:53 来源：oir作者：oir