将文本放入内联元素中，例如<span>。

<h1><span>The Last Will and Testament of Eric Jones</span></h1>

然后在内联元素上应用背景色。

h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}

内联元素和它的内容一样大，所以这应该可以帮你。

<h1 style=" font - family:宋体;">埃里克·琼斯最后的遗嘱< h1> .

可以使用html5标记标签内的段落和标题标签。

<p>lorem ipsum <mark>高光文本</mark> dolor sit.</p>

选项1

显示:表;

不需要家长

h1 { 显示:表;/*保持背景色紧密包裹*/ Margin: 0px auto 0px auto;/*保持表格居中*/ 填充:5 px;字体大小:20 px;背景颜色:绿色,颜色:# ffffff; ｝ <h1>埃里克·琼斯最后的遗嘱和遗嘱<h1>

小提琴

http://jsfiddle.net/J7VBV/293/

more

display: table告诉元素像一个正常的HTML表一样运行。

更多信息请访问w3schools, CSS Tricks和这里

---

选项2

显示:inline-flex;

要求文本对齐:中心;在父

.container { text-align:中心;/*居中子节点*/ ｝ h1 { 显示:inline-flex;/*保持背景色紧密包裹*/ 填充:5 px;字体大小:20 px;背景颜色:绿色,颜色:# ffffff; ｝ < div class = "容器" > <h1>埃里克·琼斯最后的遗嘱和遗嘱<h1> < / div >

---

选项3

显示:flex;

需要一个灵活的父容器

.container { 显示:flex; justify-content:中心;/*居中子节点*/ ｝ h1 { 显示:flex; /* margin: 0 auto;或者使用自动左/右边距代替justify-content center */ 填充:5 px;字体大小:20 px;背景颜色:绿色,颜色:# ffffff; ｝ < div class = "容器" > <h1>埃里克·琼斯最后的遗嘱和遗嘱<h1> < / div >

关于

也许最受欢迎的Flexbox指南和我经常参考的是CSS Tricks

---

选项4

显示:块;

需要一个灵活的父容器

.container { 显示:flex; justify-content:中心;/*中心子*/ ｝ h1 { 显示:块; 填充:5 px;字体大小:20 px;背景颜色:绿色,颜色:# ffffff; ｝ < div class = "容器" > <h1>埃里克·琼斯最后的遗嘱和遗嘱<h1> < / div >

---

选择5

::之前

需要在CSS文件中输入单词(不太实用)

h1 { 显示:flex;/*设置伸缩盒*/ justify-content:中心;/*所以你可以将内容居中*/ } {前h1:: 内容:“埃里克·琼斯的最后遗嘱”;/*内容*/ background-color:绿色;color: #ffffff; } <标题> < / h1 >

小提琴

http://jsfiddle.net/J7VBV/457/

关于

关于css伪元素::before和::after的更多信息请参见w3schools中的css技巧和伪元素

---

选择6

显示:inline-block;

位置定心:absolute和translateX 要求一个职位:相对父母

.container { position: relative; /* required for absolute positioned child */ } h1 { display: inline-block; /* keeps container wrapped tight to content */ position: absolute; /* to absolutely position element */ top: 0; left: 50%; /* part1 of centering with translateX/Y */ transform: translateX(-50%); /* part2 of centering with translateX/Y */ white-space: nowrap; /* text lines will collapse without this */ padding:5px;font-size:20px;background-color:green;color:#ffffff; } <h1>The Last Will and Testament of Eric Jones</h1>

关于

关于transform: translate()居中的更多信息;(和一般的居中)在这篇CSS技巧文章

---

选择7

文本阴影:和框阴影:

不是OP要找的，但可能对其他人找到这里有帮助。

h1, h2, h3, h4, h5 {display: table;margin: 10px auto;padding: 5px;font-size: 20px;color: #ffffff;overflow:hidden;} h1 { text-shadow: 0 0 5px green,0 0 5px green, 0 0 5px green,0 0 5px green, 0 0 5px green,0 0 5px green, 0 0 5px green,0 0 5px green; } h2 { text-shadow: -5px -5px 5px green,-5px 5px 5px green, 5px -5px 5px green,5px 5px 5px green; } h3 { color: hsla(0, 0%, 100%, 0.8); text-shadow: 0 0 10px hsla(120, 100%, 25%, 0.5), 0 0 10px hsla(120, 100%, 25%, 0.5), 0 0 10px hsla(120, 100%, 25%, 0.5), 0 0 5px hsla(120, 100%, 25%, 1), 0 0 5px hsla(120, 100%, 25%, 1), 0 0 5px hsla(120, 100%, 25%, 1); } h4 { /* overflow:hidden is the key to this one */ text-shadow: 0px 0px 35px green,0px 0px 35px green, 0px 0px 35px green,0px 0px 35px green; } h5 { /* set the spread value to something larger than you'll need to use as I don't believe percentage values are accepted */ box-shadow: inset 0px 0px 0px 1000px green; } <h1>The First Will and Testament of Eric Jones</h1> <h2>The 2nd Will and Testament of Eric Jones</h2> <h3>The 3rd Will and Testament of Eric Jones</h3> <h4>The Last Will and Testament of Eric Jones</h4> <h5>The Last Box and Shadow of Eric Jones</h5>

小提琴

https://jsfiddle.net/Hastig/t8L9Ly8o/

更多的选择

通过结合上面的不同显示选项和居中方法，还有其他一些方法可以做到这一点。

HTML

<h1 class="green-background"> Whatever text you want. </h1>

CSS

.green-background { 
    text-align: center;
    padding: 5px; /*Optional (Padding is just for a better style.)*/
    background-color: green; 
}

<mark>标签与背景颜色帮助我。

输入:

<p>
    Effective <mark style="background-color: light-gray">Nov 1, 2022</mark> We will be lowering our price.
</p>

输出: 自2022年11月1日起，我们将降低价格。

Ref