CSS導航欄 - 基於導航欄內元素的居中

我試圖創建一個導航欄，其中包含四個元素，兩個較小的按鈕將鏈接到主頁和一個聯繫頁面，然後兩個更大的按鈕將鏈接到該網站的兩個主要部分。我試圖以兩個大按鈕居中的方式來定位事物，左邊有兩個較小的按鈕。CSS導航欄 - 基於導航欄內元素的居中

我不能「保證金：0汽車;」他們自己的div內的兩個大按鈕，因爲我必須將其設置爲「display：block;」它將它們設置在與較小按鈕不同的行上，並且一旦瀏覽器窗口發生更改，就會絕對定位事物。

我覺得我在這裏錯過了一些簡單的東西。我從錯誤的角度來看這個嗎？

這裏是什麼，我目前所面對的一個Dabblet ... http://dabblet.com/gist/6287837

HTML

<div id="nav-container"> 
<div id="small-button-container"> 
    <img src="http://placehold.it/47x22" class="small-button01" /> 
    <img src="http://placehold.it/70x42" class="small-button02" /> 
</div> 
<div id="big-button-container"> 
    <img src="http://placehold.it/360x64" /> 
    <img src="http://placehold.it/360x64" /> 
</div> 
</div>

CSS

#nav-container{ 
outline: 1px red dashed; 
width: 1000px; 
display: block; 
margin: 0 auto;} 

#small-button-container{ 
display: inline-block; 
width: 136px; 
position: relative; 
top: -22px; 
left: 40px;} 

#big-button-container{ 
display: inline-block; 
width: 780px; 
height: 64px; 
margin-left: 70px;} 

.small-button01{ 
display: inline; 
position: relative; 
left: 5px;} 

.small-button02{ 
display: inline; 
position: relative; 
left: 15px;}

來源

2013-08-20 Brad

在這裏，你去。 http://dabblet.com/gist/6288178。請注意，這些小按鈕沒有足夠的空間 – Itay

您可以申請position: absolute;您#small-button-container，所以大按鈕將居中。

請注意，我們將position: relative;放在父容器上，因此#small-button-container將相對於其父項絕對定位。

CSS

#nav-container { 
    outline: 1px red dashed; 
    width: 1000px; 
    display: block; 
    margin: 0 auto; 
    text-align: center; 
    position: relative; 
} 
#small-button-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
}

Demo

來源

2013-08-20 22:31:21 3dgoo

除了位置：絕對的，你也可以嘗試使用負左邊距＃導航容器，如果你知道#small的計算寬度-button容器。您可以在＃nav-container上使用text-align：center。既然它是一個div，你也不需要使用display：block。如果你在＃小按鈕容器上有更多的填充，你需要考慮這一點。

#nav-container { 
    margin: 0px auto; 
    text-align: center; 
    margin-left: -136px; 
}

來源

2013-08-20 22:41:27 shadenite

CSS導航欄 - 基於導航欄內元素的居中

回答

相關問題