很容易:

<p>lorem ibsum....</p>

样式:

p{
    background-color: #eee;
    display: inline;
}

---

背景设置为元素的整体大小; 从这里修改内联元素和块元素之间的区别

一个非常简单的技巧是添加一个<span>标记，并为其添加背景色。它会变成你想要的样子。

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

和CSS

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

WHY?

<span>标记在一个内联元素标记中，因此它将只跨越伪造效果的内容。

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

你的CSS是这样的

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

有点晚了，但我想补充一下我的意见……

为了避免添加额外的内span标记，您可以将<h1>显示属性从块更改为内联(catch是您必须确保<h1>之后的元素是块元素。

HTML

<h1>  
The Last Will and Testament of
Eric Jones</h1> 
<p>Some other text</p>

CSS

h1{
    display:inline;
    background-color:green;
    color:#fff;
}

结果 JSFIDDLE http://jsfiddle.net/J7VBV/

选项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>或<div>居中。

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