在具有浮动元素的元素内部居中放置一个非浮动元素

Question

我在对齐导航栏内的某些元素时遇到问题。

下面是对的jsfiddle一个例子：http://jsfiddle.net/flobar/b7nzR/

这里的HTML：

<div id="nav"> 
    <div id="menu">Menu</div> 
    <div id="logo">Logo</div> 
    <div id="settings">Settings</div> 
</div> 

这里的CSS：

#nav { 
    height: 60px; 
    border: 1px solid #ccc;  
} 

#menu { 
    width: 70px; 
    height: 30px; 
    margin-top: 15px; 
    float: left; 
    background: #ccc; 
} 

#logo { 
    width: 200px; 
    height: 30px; 
    margin: 15px auto 0 auto; 
    background: #ccc; 
} 

#settings { 
    width: 70px; 
    height: 30px; 
    margin-top: 15px; 
    float: right; 
    background: #ccc; 
} 

的问题是，最右边块正在被向下推中央块，但我不知道为什么。

任何人都可以帮忙。

Answer 1

我将解释这是怎么回事那里，你有你的第一个div设置为float: left;这将很好地浮动，现在你的第二个div不浮动要么left或right所以它采取整个可用水平空间导致第三个div呈现在下面。

Demo

#logo { 
    width: 200px; 
    height: 30px; 
    margin: 15px auto 0 auto; 
    background: #ccc; 
    float: left; 
    margin-left: 120px; 
} 

现在知道的事实，要居中对齐的#logo所以在这种情况下，让你的#logodivposition: absolute;

#nav { 
    height: 60px; 
    border: 1px solid #ccc; 
    position: relative; /* Be sure you use this else your div will fly out in the wild */ 
} 

#logo { 
    width: 200px; 
    height: 30px; 
    margin: 15px auto 0 auto; 
    background: #ccc; 
    position: absolute; /* Takes your element out of the flow*/ 
    left: 50%; /* 50% from the left */ 
    margin-left: -100px; /* 1/2 of total width to ensure that it's exactly centered */ 
} 

Demo 2

Answer 2

您还必须浮动#logo;

#logo { 
    float:left; 
    width: 200px; 
    height: 30px; 
    margin: 15px auto 0 auto; 
    background: #ccc; 
} 

example

Answer 3

#nav { 
     height: 60px; 
     border: 1px solid #ccc; 
display:table; 
    } 

    #menu { 
     width: 70px; 
     height: 30px; 
     margin-top: 15px; 
     float: left; 
     background: #ccc; 
display: inline-table; 
    } 

    #logo { 
     width: 200px; 
     height: 30px; 
     margin: 15px auto 0 auto; 
     background: #ccc; 
display: inline-table; 
    } 

    #settings { 
     width: 70px; 
     height: 30px; 
     margin-top: 15px; 
     float: right; 
     background: #ccc; 
     display:inline-table 
    }