选项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/

更多的选择

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

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

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

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

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

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

编辑:下面的答案适用于大多数情况。然而OP后来提到，除了CSS文件，他们不能编辑任何东西。但我把这个留在这里，可能对其他人有用。

其他人忽略的主要考虑是OP声明他们不能修改HTML。

你可以在DOM中定位你需要的东西，然后用javascript动态地添加类。然后按你需要的样式。

在我做的一个例子中，我用jQuery瞄准所有<p>元素，并用一个带有“colored”类的div包装它

$( "p" ).wrap( "<div class='colored'></div>" );

然后在我的CSS中，我针对<p>，并给它背景色，并更改为display: inline

.colored p {
    display: inline;
    background: green;
}

通过将显示设置为内联，您将失去它通常会继承的一些样式。因此，请确保您的目标是最特定的元素，并设置容器的样式以适应您的其余设计。这只是一个工作的起点。小心使用。CodePen上的工作演示

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; 
}

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

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

你必须提到h1标签的宽度..

你的CSS是这样的

h1 {
text-align: center;
background-color: green;
width: 600px;
 }