0

何らかの理由で、このテキストは中央に配置されていません。

#highlightheader
{
           background-color:#006600;
           color:white;
           font-size:30px;
           text-align:center; 
           font-weight:bold;
 }​


​&lt;span id="highlightheader">example text</span>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

http://tinkerbin.com/eoJprUq5（jfiddleが遅すぎる、代わりにこれを使用）

編集：テキストだけを強調表示し、緑色のバー全体を表示したくない。

4

7 に答える 7

4

span はインラインタグです display:block を css http://tinkerbin.com/oBgV5mcUに追加します

于 2012-06-28T06:23:46.463 に答える
2

SPAN を使用しており、スパンはインライン要素であるためです。<p>CSS で display:block を使用するか、幅:100%の p-tagまたは div を使用して、テキストを中央に配置します。

編集：

#highlightheader {
    text-align:center;
}

#highlightheader span { 
    background-color:#006600; 
    color:white; 
    font-size:30px; 
    text-align:center;  
    font-weight:bold; 
}

<p id="highlightheader"><span>example text</span>​&lt;/p>​
于 2012-06-28T06:23:53.417 に答える
2

スパンはインライン要素ですが、ブロック要素は機能します...代わりにCSS<div>に追加します。display: block;

于 2012-06-28T06:23:57.007 に答える
2

特にここに見出しが必要なため、スパンの周りに div を使用する必要があります。他の回答で述べたように、spanインライン要素に使用する必要があります。強調表示に正しく使用していますが、配置は で行う必要がありますdiv。

それを試してください：

div.center{
   text-align:center;
}

#highlightheader
{
           background-color:#006600;
           color:white;
           font-size:30px; 
           font-weight:bold;
 }​

<div class=center>
​&lt;span id="highlightheader">example text</span>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
</div>
于 2012-06-28T06:27:19.487 に答える
2

display: block;に aを追加し#highlightheaderます。<span>インライン要素です！

于 2012-06-28T06:27:48.473 に答える
2

こんにちは、CSS でこれを使用してみてください

パディング:0px 50px 0px 50px;

于 2012-06-28T06:27:59.667 に答える
1

Span はインライン要素です。これは、その幅がコンテンツのサイズに自動的に適合することを意味します。代わりに、スパンを ap タグ (ブロック要素) に変更します。ブロック要素のデフォルトは、親の 100% です。

ここでデモを見ることができます

于 2012-06-28T06:23:41.253 に答える