居中對齊div中的「span」文本

我有一個HTML代碼爲;居中對齊div中的「span」文本

<div class="left"> 
<span class="panelTitleTxt">Title text</span> 
</div>

我的CSS如下;

.left { 
    background-color: #999999; 
    height: 50px; 
    width: 24.5%; 
} 
span.panelTitleTxt { 
       display: block; 
       width: 100%; 
       height: 100%; 
}

現在我該如何居中對齊div中的span文本？（假設％轉換後的「左」div得到100px的像素寬度）

我試過使用margin:auto的標準方式，但那不起作用。我想避免使用text-align:center。

有沒有其他方法可以解決這個問題？

來源

2011-10-25 testndtv

如果您不介意我詢問，爲什麼要避免使用」text-align：center「？ –

如果要對齊span的文本，請使用'span {text-align：center;}'。如果這不會產生你想要的輸出，你將不得不解釋爲什麼我們能夠幫助你（否則我們只需要猜測你的實際要求是）。 –

如果是一個_title_，使用適當的標籤（h1，h2，h31 h4，h5或h6），不要使用非語義。 – Kyle

您給予跨度100％的寬度，導致它擴展到父級的大小。這意味着你不能居中對齊它，因爲沒有空間來移動它。

您可以給跨度設置一個寬度，然後再添加margin:0 auto。這將中心對齊它。

.left 
{ 
    background-color: #999999; 
    height: 50px; 
    width: 24.5%; 
} 
span.panelTitleTxt 
{ 
    display:block; 
    width:100px; 
    height: 100%; 
    margin: 0 auto; 
}

來源

2011-10-25 08:29:56 Lee

您無法指定內聯元素的寬度（例如'span'）：http://stackoverflow.com/a/621406/343204 – Snowcrash

您也可以在更改塊元素時使用它。 – Lee

如果你知道跨度的寬度，你可以填充左邊距。

嘗試這種情況：

.center {文本對齊：中心}
div.center跨度{顯示：表; 「在你的樣式表類（如‘div.center跨度中心：}

添加’類的

如果你想要一些跨度爲中心，但不是別人，更換中心」。 -span「），並將該類添加到跨度中

來源

2013-10-02 15:59:10 Cuse70

居中對齊div中的「span」文本

回答

相關問題