Yang saya inginkan adalah latar belakang hijau berada tepat di belakang teks, tidak 100% dari lebar halaman. Ini kode saya saat ini:

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

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

Letakkan teks dalam elemen sebaris , seperti a <span>.

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

Dan kemudian terapkan warna latar belakang pada elemen sebaris.

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

Elemen sebaris sama besarnya dengan isinya, jadi itu harus dilakukan untuk Anda.

Pilihan 1

display: table;

• tidak ada orang tua yang dibutuhkan

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>

biola

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

lebih

display: table memberi tahu elemen untuk berperilaku seperti tabel HTML biasa.

Lebih lanjut tentang itu di w3schools , Trik CSS dan di sini

pilihan 2

display: inline-flex;

• membutuhkan text-align: center;pada orang tua

.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>

Pilihan 3

display: flex;

• membutuhkan wadah induk fleksibel

.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>

tentang

Mungkin panduan paling populer untuk Flexbox dan yang selalu saya rujuk adalah di Trik CSS

Pilihan 4

display: block;

• membutuhkan wadah induk fleksibel

.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>

Pilihan 5

::before

• membutuhkan memasukkan kata-kata dalam file css (tidak terlalu praktis)

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>

biola

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

tentang

Lebih lanjut tentang elemen pseudo css :: before dan :: after di CSS Trik dan elemen pseudo secara umum di w3schools

Pilihan 6

display: inline-block;

• berpusat dengan position: absolutedantranslateX

• membutuhkan position: relativeorang tua

.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>

tentang

Lebih lanjut tentang pemusatan dengan transform: translate();(dan pemusatan secara umum) di artikel trik CSS ini

Pilihan 7

text-shadow: dan box-shadow:

• bukan yang dicari OP tetapi mungkin membantu orang lain menemukan jalan mereka di sini.

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>

biola

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

Opsi lanjutan

Ada beberapa cara lain untuk melakukannya dengan menggabungkan berbagai opsi tampilan dan metode pemusatan di atas.

Sedikit terlambat untuk bermain tetapi saya pikir saya akan menambahkan 2 sen saya ...

Untuk menghindari penambahan mark-up ekstra dari sebuah bentang dalam Anda dapat mengubah <h1>properti tampilan dari blockmenjadi inline(tangkapannya adalah Anda akan memastikan elemen setelah <h1>elemen blok.

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

Hasil

JSFIDDLE http://jsfiddle.net/J7VBV/

Trik yang sangat sederhana untuk melakukannya, adalah menambahkan <span>tag dan menambahkan warna latar belakang. Ini akan terlihat seperti yang Anda inginkan.

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

Dan CSS

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

MENGAPA?

<span> tag dalam tag elemen inline, jadi itu hanya akan menjangkau konten yang memalsukan efeknya.

EDIT: jawaban di bawah ini akan berlaku dalam banyak kasus. Namun OP kemudian menyebutkan bahwa mereka tidak dapat mengedit apa pun selain file CSS. Tetapi akan meninggalkan ini di sini sehingga mungkin berguna bagi orang lain.

Pertimbangan utama yang diabaikan oleh orang lain adalah bahwa OP telah menyatakan bahwa mereka tidak dapat memodifikasi HTML.

Anda dapat menargetkan apa yang Anda butuhkan di DOM kemudian menambahkan kelas secara dinamis dengan javascript. Lalu gaya sesuai kebutuhan Anda.

Dalam contoh yang saya buat, saya menargetkan semua <p>elemen dengan jQuery dan membungkusnya dengan div dengan kelas "berwarna"

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

Kemudian di CSS saya, saya menargetkan <p>dan memberinya warna latar belakang dan mengubahnya menjadidisplay: inline

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

Dengan menyetel tampilan ke sebaris, Anda kehilangan beberapa gaya yang biasanya diwarisi. Jadi, pastikan Anda menargetkan elemen paling spesifik dan mengatur gaya penampung agar sesuai dengan desain Anda lainnya. Ini hanya dimaksudkan sebagai titik awal kerja. Gunakan dengan hati-hati. Demo kerja di CodePen

Seperti catatan jawaban lainnya, Anda dapat menambahkan a background-colorke a di <span>sekitar teks Anda agar ini berfungsi.

Dalam kasus di mana Anda memilikinya line-height, Anda akan melihat celah. Untuk mengatasinya, Anda dapat menambahkan a box-shadowdengan sedikit tumbuh ke rentang Anda. Anda juga ingin box-decoration-break: clone;FireFox merendernya dengan benar.

EDIT: Jika Anda mendapatkan masalah di IE11 dengan box-shadow, coba tambahkan outline: 1px solid [color];juga untuk IE saja.

Inilah yang terlihat seperti beraksi:

.container {
  margin: 0 auto;
  width: 400px;
  padding: 10px;
  border: 1px solid black;
}

h2 {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
  text-transform: uppercase;
  line-height: 1.5;
  text-align: center;
  font-size: 40px;
}

h2 > span {
  background-color: #D32;
  color: #FFF;
  box-shadow: -10px 0px 0 7px #D32,
    10px 0px 0 7px #D32,
    0 0 0 7px #D32;
  box-decoration-break: clone;
}

<div class="container">
    <h2><span>A HEADLINE WITH BACKGROUND-COLOR PLUS BOX-SHADOW :3</span></h2>
</div>

dapat menggunakan tag html5 mark dalam paragraf dan tag heading.

<p>lorem ipsum <mark>Highlighted Text</mark> dolor sit.</p>

h1 adalah elemen level blok. Anda akan perlu menggunakan sesuatu seperti span sebagai gantinya karena ini adalah elemen level sebaris (yaitu: tidak menjangkau seluruh baris).

Dalam kasus Anda, saya menyarankan yang berikut:

style.css

.highlight 
{
   background-color: green;
}

html

<span class="highlight">only the text will be highlighted</span>

Coba hapus pusat perataan teks dan pusatkan <h1>atau <div>teks berada.

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

Anda dapat menggunakan <mark>tag HTML5 .

HTML:

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

CSS:

mark
{
    background-color: green;
}

Coba yang ini:

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

Harap dicatat bahwa calc tidak kompatibel untuk semua browser :) Hanya ingin konsisten dengan kesejajaran di postingan asli.

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

Anda harus menyebutkan lebar tag h1 ..

css Anda akan menjadi seperti ini

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

HTML

<h1>
  <span>
    inline text<br>
      background padding<br>
      with box-shadow
  </span>
</h1> 

Css

h1{
  font-size: 50px;
  padding: 13px; //Padding on the sides so as not to stick.


  span {  
    background: #111; // background color
    color: #fff;
    line-height: 1.3; //The height of indents between lines.
    box-shadow: 13px 0 0 #111, -13px 0 0 #111; // Indents for each line on the sides.
  }
}

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