実際の幅でh1タグの中心を作る方法

Question

h1タグの中心を作る必要があり、またその周りに境界を作る必要があります。 さらに幅を取らないようにするには、display: inline-blockとしますが、タグはtext-align: centerに応答しません。

h1 { 
 
    text-align: center; 
 
    border: 1px solid; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <h1>This is the Title</h1> 
 
</div>

Answer 1

代わりh1タグ

text-align: center; 

Answer 2

あなたは見出しにdisplay: tableを使用することができます。これは、その内容に応じて幅を持つように見出しを作りますが、ブロックレベルの要素にも残ります。そして、margin: 0 autoプロパティを使用して中央に配置することができます。

.heading { 
 
    border: 1px solid black; 
 
    display: table; 
 
    margin: 0 auto; 
 
    padding: 5px; 
 
}

<h1 class="heading">Heading 1</h1>

Answer 3

の親タグに以下を入れIは、@ j10i2に同意 - .container {テキスト整列：センター;}が、別の方法をそれを行うには、コンテンツをh1内に集中させることです。 h1はブロックレベルの要素なので、その中にスパンを挿入してその中にテキストを配置します。 text-align：centerを適用すると、h1内のスパンのセンタリングが可能になります。

UPDATE - 中心のコンテンツを囲む境界線が必要であることに気がつきました。これは簡単です.hoder内の中央に配置されたスパンにboderを適用します。

h1 { 
 
text-align:center; 
 
} 
 

 
h1 span { 
 
border: solid 1px #333; 
 
padding:5px 15px; 
 
}

<h1><span>Heading 1</span></h1>

Answer 4

ブートストラップを使用している場合は、ここで

クラステキスト・センターを使用することができます私はあなたのクエリから

を理解することができるものの例でありますHTML：

<div class="head"> 
    <h1>Game Over</h1> 
</div> 

CSS

.head{width:100%;float:left;margin:0 auto;text-align:center;} 
h1{border:1px solid red;text-align:center;position:relative;} 
h1:after{position:absolute;content:"";top:0;width:200px;height:38px;border:1p x solid green;left:50%;transform:translate(-50%, 0);} 

ここで、これはあなたのHTMLになりfiddle

Answer 5

です。

<div class="heading"> 
<h1>My Heading</h1> 
</div> 

これはあなたが@gavgrif指示に従うことができCSS

.heading { 
    text-align: center; 
} 

.heading h1 { 
    border: 1px solid black; 
    display: inline-block; 
} 

Answer 6

に入ります。

<div class="container"> 
    <h1><span>Hello</span></h1> 
</div> 

h1 { 
text-align: center; 
} 

span { 
border: 1px solid #000; 
padding: 5px 10px; 
} 

Answer 7

あなたは[中央揃えを見出してください]のposition: absolute;とtransform

.heading { 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
    transform: translate(-50%, 0%); 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 0; 
 
}

<h1 class="heading">Heading 1</h1>