如何居中对齐包含没有固定宽度的浮动的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

回答

相关问题