如何水平居中一個頭div內的兩個div？

我有一個以100％寬度固定在瀏覽器窗口頂部的標題div。在標題div中有一個帶有標題文本的div，並且有一個帶有水平列表的div。水平列表div應顯示在標題文本div的右側。如何水平居中一個頭div內的兩個div？

這裏是我的CSS和HTML：

#header { 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    background-color:#333333; 
 
    padding:20px; 
 
} 
 

 
#title { 
 
    float:left; 
 
    color:#000000; 
 
    font-size:30px; 
 
    margin-right:24px; 
 
    background-color:#ffffff; 
 
    padding:8px; 
 
} 
 

 
#navigation ul { 
 
    padding:0; 
 
    margin:0; 
 
    list-style-type:none; 
 
} 
 

 
#navigation ul li { 
 
    display:inline; 
 
    margin-right:20px; 
 
    padding:3px; 
 
    background-color:#ffffff; 
 
} 
 

 
#navigation ul li a { 
 
    color:#000000; 
 
    text-decoration:none; 
 
}

<div id="header"> 
 
    <div id="title">Some Title Text</div> 
 
    <div id="navigation"><ul> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">About</a></li> 
 
    <li><a href="#">Contact</a></li> 
 
    </ul></div> 
 
</div>

所以現在標題和導航的div留頭DIV中對齊。我怎樣才能將標題和導航div橫向居中？

編輯：寧願不使用硬編碼寬度的解決方案（例如，width: 500px），因爲列表大小並不總是相同的。

來源

2012-07-20 Ryan

[居中另一個專區內浮動的div]的可能重複（http://stackoverflow.com如果你想改變菜單的寬度，或有它動態調整大小/問題/ 1269245 /定心，浮動的div中之另一-DIV） – kay 2012-07-20 17:19:55

與所述報頭和/或所述兩個div的改變寬度工程的方法（如果標題變得更長或更短，或者如果導航項目被添加或刪除）：

在#header設置text-align: center，和display: inline-block上#title和#navigation - 演示http://dabblet.com/gist/3151355

變化CSS：

#header { 
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
    background-color:#333333; 
    padding:20px; 
    text-align: center; /* added */ 
} 
#title { 
    color:#000000; 
    font-size:30px; 
    margin-right:24px; 
    display: inline-block; /* took out float:left and added this */ 
    background-color:#ffffff; 
    padding:8px; 
} 
#navigation { 
    display: inline-block; /* added */ 
}

我也爲了不添加T形成#navigation ul li:last-child {margin-right:0} Ø有最後一個列表項目之後24px保證金（這將使它看起來像有在導航的右側更大的空間）

來源

2012-07-20 15:34:46 Ana

+1：感謝安娜，它完美的作品。 – Zistoloen 2014-01-09 09:37:06

你可以用標題和導航的div在另一個div然後使用中心margin: 0 auto該專區。

HTML

<div id="header"> 
    <div id="center"> 
     <div id="title">Some Title Text</div> 
     <div id="navigation"> 
      <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
    </div> 
</div>

CSS

#center { 
    width: 500px; /* or any other width */ 
    margin: 0 auto; 
}

JS小提琴：http://jsfiddle.net/rJyuJ/

來源

2012-07-20 15:24:43 JSW189

這將無法正常工作。 – 2012-07-20 15:32:49

我不認爲這是一個好的解決方案，因爲列表項的數量並不總是相同的。例如，如果用戶登錄，那麼可能會有更多的項目。有沒有辦法做到這一點，而不必指定'width：500px'？ – Ryan 2012-07-20 15:39:55

見：http://stackoverflow.com/questions/1269245/centering-floating-divs-within-another-div – JSW189 2012-07-20 15:44:20

喜請你用下面的CSS嘗試的#header

#header { 
    position:fixed; 
    top:0; 
    left:0; 
    right:0; 
    background-color:#333333; 
    padding:20px; 
    text-align:center; 
}

來源

2012-07-20 15:25:11

如何水平居中一個頭div內的兩個div？

回答

相關問題