182

私が欲しいのは、緑の背景がページ幅の100％ではなく、テキストのすぐ後ろにあることです。これが私の現在のコードです：

h1 { 
    text-align: center; 
    background-color: green; 
}
<h1>The Last Will and Testament of Eric Jones</h1>

4

16 に答える 16

247

テキストを。などのインライン要素<span>に配置します。

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

次に、インライン要素に背景色を適用します。

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

インライン要素はその内容と同じくらい大きいので、それで十分です。

于 2013-01-14T01:12:26.747 に答える
98

オプション1

display: table;

  • 親は不要

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>

フィドル

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

もっと

display: table通常の HTML テーブルと同じように動作するよう要素に指示します。

詳しくはw3schools、CSS Tricks、こちら

オプション 2

display: inline-flex;

  • text-align: center;親に必要

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

オプション 3

display: flex;

  • フレックス親コンテナーが必要です

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

約

おそらく最も人気のある Flexbox のガイドであり、私が常に参照しているものはCSS Tricksにあります。

オプション 4

display: block;

  • フレックス親コンテナーが必要です

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

オプション 5

::before

  • cssファイルに単語を入力する必要があります（あまり実用的ではありません）

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>

フィドル

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

約

css 疑似要素 ::before および ::after の詳細については、 w3schoolsのCSS トリックと疑似要素全般を参照してください。

オプション 6

display: inline-block;

  • position: absoluteとでセンタリングtranslateX

  • position: relative親が必要

.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

text-shadow:とbox-shadow:

  • 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/

より多くのオプション

上記のさまざまな表示オプションとセンタリング方法を組み合わせることで、これを実現する方法が他にもいくつかあります。

于 2015-10-03T06:17:29.340 に答える
9

これを行うための非常に簡単なトリックは、<span>タグを追加し、それに背景色を追加することです。それはあなたがそれを望むように見えるでしょう。

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

そしてCSS

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

なぜ？

<span>インライン要素タグのタグであるため、効果を偽造するコンテンツにのみ適用されます。

于 2013-01-14T01:12:51.513 に答える
4

h1はブロックレベルの要素です。インラインレベルの要素であるため、代わりにspanのようなものを使用する必要があります（つまり、行全体にまたがることはありません）。

あなたの場合、私は次のことを提案します：

style.css

.highlight 
{
   background-color: green;
}

html

<span class="highlight">only the text will be highlighted</span>
于 2013-01-14T01:14:30.750 に答える
3

テキスト配置の中央を削除して、<h1>または<div>テキストが存在する中央に配置してみてください。

h1 {
    background-color:green;
    margin: 0 auto;
    width: 200px;
}
于 2013-01-14T01:12:42.013 に答える
3

段落と見出しタグ内でhtml5マークタグを使用できます。

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

于 2020-05-05T10:04:03.863 に答える