HTML - 居中DIV內容

我想跨範圍使用class test1居中div的內容。在整個頁面寬度上跨越div。但是將內容集中在div中並不是。簡單地使用align = center會發生什麼？HTML - 居中DIV內容

<style> 
    div.test1 
    { 
     width: 100%; 
     margin-left: auto; 
     margin-right: auto; 
     text-align: center; 
    } 
    div.test2 
    { 
     display: inline; 
     float: left; 
    } 
</style> 

<div class="test1"> 
    <div class="test2">This</div> 
    <div class="test2">Is</div> 
    <div class="test2">A</div> 
    <div class="test2">Test</div> 
</div>

來源

2012-10-09 craig1231

你的div居中。但它也是100％寬... –

如果內容具有浮動屬性，則無法將test1的內容居中。另外，如果浮動，則不需要顯示：inline;或者作爲浮動適用這 –

@DannyHearnah他不是浮動'div.test1' –

div.test1 { 
    text-align: center; 
} 
div.test2 { 
    display: inline-block; 
    *display: inline; /* IE7 fix for inline-block */ 
    *zoom: 1;   /* IE7 fix for inline-block */ 
}

jsfiddle demo

來源

2012-10-09 12:56:32

這種給了我正確的答案，雖然我刪除了IE 7的修復和使用顯示：內聯。它適用於我給我的測試，但不適用於安全數據（我無法顯示） – craig1231

如果遇到樣式問題，'display：inline-block'可爲樣式元素提供比display：inline更大的靈活性和控制。在某些情況下，將div設置爲'display：inline'可能無法按預期工作。 –

試試這個：

<style> 
    div.test1 
    { 
     width: 100%; 
     margin-left: auto; 
     margin-right: auto; 
     text-align: center; 
    } 

</style> 

<div class="test1"> 
    <div class="test2">This</div> 
    <div class="test2">Is</div> 
    <div class="test2">A</div> 
    <div class="test2">Test</div> 
</div>

來源

2012-10-09 12:50:56

test1的內容將不再彼此對齊..因此，使用浮動的操作系統將div對齊在一起 –

什麼都發生在使用ALIGN =中心簡單？

該align標籤is deprecated。無論如何，這在這種情況下不起作用。

使用display: inline-block;而不是float: left;（並刪除display: inline;部分，當然）。浮動元素可以而不是居中。

來源

2012-10-09 12:51:36 Chris

您以秒爲單位擊敗了我:)仍然，加上1，因爲這是我要說的 – Dave

I懷疑這些降價是來自那些希望他們的答案浮到頂端的人。我可能錯了;請隨時發表評論。 – Chris

您使用的CSS代碼：

.test1 .test2{ 
    width:100%; 
    text-align:center; 
}

問候

來源

2012-10-09 12:54:22

我想包含div並排... – craig1231

你可以刪除寬度：100％，並寫入浮動權利 –

如果你知道.test1 http://jsfiddle.net/acbE7/

來源

2012-10-09 12:57:02

Div的寬度是塊級元素。跨度是內聯的。考慮一個更大的div並跨越裏面的小元素。

來源

2012-10-09 13:19:08

剛開始之前<center> div和</center>關閉div後。像這樣：

<center> 
    <div class="test1"> 
    <div class="test2">This</div> 
    <div class="test2">Is</div> 
    <div class="test2">A</div> 
    <div class="test2">Test</div> 
</div> 
</center>

來源

2017-03-16 15:59:36

HTML - 居中DIV內容

回答

相關問題