如何居中對齊包含沒有固定寬度的浮動的div

我在包裝div中有一個ul菜單。每個li元素都有float：left（這是一個水平菜單）。我想將菜單置於我的頁面容器中（大約1100px），但我不知道菜單的大小是什麼，所以我不能使用「margin：0 auto」。如何居中對齊包含沒有固定寬度的浮動的div

我嘗試了許多不同的事情，但我無法得到這個工作。

這是wordpress中的一個菜單，所以ul和wrapper div的標記是由wordpress生成的。寧願不要弄亂...

來源

2012-03-16 Moshe Shaham

使用保證金：0汽車;還可以使用display：block;剩下：50％;希望這有助於 – RSM 2012-03-16 11:52:41

您可以定義容器display:inline-block，並通過設置屬性text-align:center，像這樣對齊文本到容器的中心：

CSS

.nav > li { 
    display:inline-block; 
    *display:inline; /* ie7 fix */ 
    zoom:1; /* hasLayout ie7 trigger */ 
} 

.nav { 
    text-align:center; 
}

來源

2012-03-16 11:54:17

是的，這工作！謝謝。 – 2012-03-16 12:07:16

@Andres llich我的導航li css float：left;保證金：0 10px; 如果我使用display inline-block而不是float left my circle（list-style-type）remove但我想要這個列表樣式類型和ul在中心 – 2014-01-13 18:04:42

最好你可以使用display:inline-block屬性。像這樣：

body{ 
    text-align:center; 
} 
.parent{ 
    text-align:left; 
    background:red; 
    display:inline-block; 
    *display:inline;/* For IE7*/ 
    *zoom:1;/* For IE7*/ 
}

入住這http://jsfiddle.net/pJs6e/2/

來源

2012-03-16 11:56:52 sandeep

<div style="position: relative; width:100%"> 
    <div style="position: relative; left: 50%; float: left;"> 
     <div style="position: relative; right: 50%;"> 

     <!-- the image width is unknown --> 
     <img src="https://react-bootstrap.github.io/assets/logo.png" /> 
     </div> 
    </div> 
    </div>

https://jsbin.com/miteliwafu/edit?html,output

來源

2016-01-23 11:32:10

如何居中對齊包含沒有固定寬度的浮動的div

回答

相關問題