<h1><span>The Last Will and Testament of Eric Jones</span></h1>
And then apply the background color on the inline element.
h1 {
text-align: center;
}
h1 span {
background-color: green;
}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;
}h1 {
display: table; /* keep the background color wrapped tight */
margin: 0px auto 0px auto; /* keep the table centered */
padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<h1>The Last Will and Testament of Eric Jones</h1>
.container {
text-align: center; /* center the child */
}h1 {
display: inline-flex; /* keep the background color wrapped tight */
padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<div class="container">
<h1>The Last Will and Testament of Eric Jones</h1>
</div>.container {
display: flex;
justify-content: center; /* center the child */
}
h1 {
display: flex;
/* margin: 0 auto; or use auto left/right margin instead of justify-content center */
padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<div class="container">
<h1>The Last Will and Testament of Eric Jones</h1>
</div>.container {
display: flex;
justify-content: center; /* centers child */
}
h1 {
display: block;
padding:5px;font-size:20px;background-color:green;color:#ffffff;
}
<div class="container">
<h1>The Last Will and Testament of Eric Jones</h1>
</div>h1 {
display: flex; /* set a flex box */
justify-content: center; /* so you can center the content like this */
}
h1::before {
content:'The Last Will and Testament of Eric Jones'; /* the content */
padding: 5px;font-size: 20px;background-color: green;color: #ffffff;
}
<h1></h1> Jones</h1>.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><h1>
<span>The Last Will and Testament of Eric Jones</span>
</h1>
h1 { text-align: center; }
h1 span { background-color: green; }http://stackoverflow.com/questions/14310154/how-do-i-set-background-color-of-text-only-in-css