HTML span align center不工作？

我有一些HTML：HTML span align center不工作？

<div align="center" style="border:1px solid red"> 
This is some text in a div element! 
</div>

股利正在改變我的文檔的間距，所以我想用一個跨度爲這個來代替。

但跨度不集中的內容：

<span style="border:1px solid red;align=center"> 
This is some text in a div element! 
</span>

我該如何解決這個問題？

編輯：

我的完整代碼：

<html> 
<body> 

<p>This is a paragraph. This text has no alignment specified.</p> 

<span style="border:1px solid red;text-align=center"> 
    This is some text in a div element! 
</span> 

</body> 
</html>

來源

2011-12-05 David19801

你的div是「改變間距」？這是什麼意思？而且你的跨度不會因爲默認是_inline_元素，而div是_block_級別的元素。 – Bojangles

你好JamWaffles，通過「間距」我的意思是div增加了內容上方和下方的空間。跨度不這樣做。 – David19801

使用Firebug或Chrome檢查器查看將什麼CSS規則應用於您的元素，然後查找添加填充或邊距的規則。周圍的元素也可能有填充/邊距。 – Bojangles

126

div是一個塊元素，並且將跨越容器的寬度，除非設置了寬度。 span是一個內聯元素，並且將具有其中文本的寬度。目前，您正嘗試將對齊設置爲CSS屬性。對齊是一個屬性。

<span align="center" style="border:1px solid red;"> 
    This is some text in a div element! 
</span>

但是，不贊成使用align屬性。您應該使用容器上的CSS text-align屬性。

<div style="text-align: center;"> 
    <span style="border:1px solid red;"> 
     This is some text in a div element! 
    </span> 
</div>

來源

2011-12-05 21:41:34 Will

+18

請不要使用'align =「center」'因爲它已被棄用。 – Biotox

+42

@Biotox你讀過完整的答案嗎？ – Will

是的，但我甚至不會把它作爲一個選項... – Biotox

的align屬性已被棄用。改爲使用CSS text-align。此外，除非您使用display:block或display:inline-block併爲寬度設置了一個值，但跨度不會居中文本居中，但它的行爲與div（塊元素）的行爲相同。

你可以發佈你的佈局的例子嗎？使用www.jsfiddle.net

來源

2011-12-05 21:41:23

這應該是正確的答案 –

工作很好！謝謝。 – dallinchase

我不能在保持內聯元素的同時對齊兩個內聯元素嗎？ –

請使用下面的樣式。 margin:auto通常用於居中對齊內容。 display:table是需要span元素

<span style="margin:auto; display:table; border:1px solid red;"> 
    This is some text in a div element! 
</span>

來源

2013-08-19 17:21:27

跨度是inline-block的，調整到嵌入式文本大小，具有堅韌，塊最努力風格的行內上下文出來。爲了簡化佈局樣式（限制衝突），請使用換行符將div添加到'p'標籤。

<p> some default stuff 
<br> 
<div style="text-align: center;"> your entered stuff </div>

來源

2015-05-13 07:44:36

-2

只需在css中使用word-wrap:break-word;即可。有用。

來源

2015-07-14 15:59:44 mon

span.login-text { 
font-size: 22px; 
display:table; 
margin-left: auto; 
margin-right: auto;

}

<span class="login-text">Welcome To .....CMP</span>

對我來說，工作非常出色。試試這也

來源

2016-02-04 14:34:52 user1183033

在所有其他的解釋之上，我相信你正在使用的不是冒號":"等於"="跡象，：

<span style="border:1px solid red;text-align=center">

它應該是：

<span style="border:1px solid red;text-align:center">

來源

2017-04-06 09:30:55 nhazean

HTML span align center不工作？

回答

相關問題