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 而 span 是一个内联元素。使用 CSS 中的 display:block 或更好的 p-tag<p>或 div 宽度：100% 来使文本居中。

编辑：

#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

跨度是一个内联元素，而像块元素一样<div>可以工作......或者添加display: block;到你的css。

于 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;_ 是一个内联元素！#highlightheader<span>

于 2012-06-28T06:27:48.473 回答
2

嗨，尝试将其与您的 CSS 一起使用

填充：0px 50px 0px 50px；

于 2012-06-28T06:27:59.667 回答
1

Span 是一个内联元素。这意味着它的宽度将自动适应其内容的大小。相反，将 span 更改为 ap 标签 - 一个块元素。块元素的默认值为 100% 的父元素。

你可以在这里看到一个演示

于 2012-06-28T06:23:41.253 回答