Question

由于某种原因，这个文本没有居中。

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


<span id="highlightheader">example text</span>

http://tinkerbin.com/eoJprUq5（jfiddle太慢了，改用了这个）

编辑：我只想突出显示文本，而不是整个绿色条。

Answer 1

span是内联标记添加display：block to css http://tinkerbin.com/oBgV5mcU

Answer 2

因为您使用SPAN并且span是内联元素。在CSS中使用display：block或更好的p-tag <p>或宽度为100％的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></p>

Answer 3

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

Answer 4

你应该在跨度范围内使用div，特别是因为你想要一个标题。如其他答案中所述，span应该用于内联元素。您正确使用它进行突出显示，但应通过div进行定位。

试试：

div.center{
   text-align:center;
}

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

<div class=center>
<span id="highlightheader">example text</span>
</div>

Answer 5

向display: block;添加#highlightheader。 <span>是内联元素！

Answer 6

您好，尝试将此用于您的css

填充：0px 50px 0px 50px;

Answer 7

Span是一个内联元素。这意味着它的宽度将自动适合其内容的大小。而是将跨度更改为p标记 - 块元素。块元素的默认值为父级的100％。

您可以看到演示here

为什么这篇文章不是以中心为中心？

7 个答案: