使用顯示：內聯居中菜單VS顯示：塊

假設有一個水平的，圖形導航菜單，其中每個菜單項是可變的寬度（由填充控制，而不是一個寬度與<li>元素）。這意味着你無法真正知道UL的寬度（以居中），因爲文字是在不同的瀏覽器不同的尺寸。使用顯示：內聯居中菜單VS顯示：塊

到現在爲止，我要麼

，並在UL

B使用利潤率左）使用jQuery來計算寬度，然後

A）只是眼睛集設置爲內嵌式等等寬度可以設置，然後它可以是margin：auto'd。

但最近有人告訴我，我可以使用display：inline和它工作得很好，不使用浮動，它總是爲中心？有誰聽說過嗎？他有點新，不能解釋清楚，所以我很好奇你們的想法。他說他認爲文本對齊：中心。我沒有看到這將如何工作，但不是文本？

2012-02-12 Tallboy

有儘可能多的方式與CSS居中的東西，因爲是爲它寫標記。發佈你的代碼，我們可以幫助解釋發生了什麼。 – 2012-02-12 09:30:08

我看他做了什麼......他設定的UL文本對齊：中心;然後他設置li元素以顯示：inline;我假設這個技巧讓瀏覽器認爲每個列表項都是文本，然後它將可變寬度列表項正確地居中？ – Tallboy 2012-02-12 09:31:27

任何文本水平元件可以被居中。它將根據其父元素居中。哪個應該是塊級元素。

下面的菜單可以居中，

<ul id="ul"> 
<li>one</li> 
<li>two</li> 
<li>January</li> 
<li>September</li> 
</ul>

使用這個CSS

ul#ul{text-align:center;} 
ul#ul li{display:inline;}

看到這個jsfiddle得到一個想法

2012-02-12 09:37:20

，這是完全有效/兼容/跨瀏覽器的HTML/CSS呢？我怎麼沒聽說過這個......該死...... – Tallboy 2012-02-12 10:04:40

設置ul和li s到display:inline或display:inline-block，並且ul的容器設置爲text-align:center。您可能需要添加zoom:1一些舊版本的IE與inline-block正常工作。

回答