尝试删除文本对齐中心，并将文本所在的<h1>或<div>居中。

h1 {
    background-color:green;
    margin: 0 auto;
    width: 200px;
}

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

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

试试这个:

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

h1:after {
    content:'The Last Will and Testament of Eric Jones';
    visibility: visible;
    display: block;
    position: absolute;
    background-color: inherit;
    padding: 5px;
    top: 10px;
    left: calc(30% - 5px);
}

请注意，calc并不兼容所有浏览器:)只是想与原始帖子中的对齐方式保持一致。

https://jsfiddle.net/richardferaro/ssyc04o4/

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

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

更多的选择

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

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