父母不能水平中心div

我有一些div設置爲導航按鈕，我已經把所有的按鈕放到一個div然後把那個div放入另一個「持有人」div。問題是我似乎無法中心控制按鈕的div。父母不能水平中心div

我試圖添加margin:0汽車，但它似乎並沒有做任何事情：

HTML：

<div class="navholder"> 

<div class="nav"> 
<div class="button1"><div class="triangle"></div></div> 
<div class="button2"><div class="triangle"></div></div> 
<div class="button3"><div class="triangle"></div></div> 
<div class="button4"><div class="triangle"></div></div> 
<div class="button5"><div class="triangle"></div></div> 
<div class="button6"><div class="triangle"></div></div> 
</div> 

</div>

CSS：

.navholder { 
    width:950px; 
    height:350px; 
    background-color:grey; 

} 

.nav { 
    position:relative; 
    bottom:0px; 
    margin:0 auto; 
} 

.button1, .button2, .button3, .button4, .button5, .button6 { 
    width:120px; 
    height:35px; 
    background-color:rgb(204,204,204); 
    margin-left:5px; 
    margin-right:5px; 
    display:inline-block; 
    float:left; 

} 

.button1:hover > .triangle, .button2:hover > .triangle, .button3:hover > .triangle, .button4:hover > .triangle, .button5:hover > .triangle, .button6:hover > .triangle{ 
    display: block; 
} 

.button1:hover, .button2:hover, .button3:hover, .button4:hover, .button5:hover, .button6:hover{ 
    background-color:#B7939B; 
} 

.triangle { 
    position:relative; 
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent; 
    border-right: 15px solid transparent; 
    border-bottom: 15px solid #B7939B; 
    top:-15px; 
    left:0; 
    right:0; 
    margin:0 auto; 
    display: none; 
}

繼承人的我的代碼Fiddle 。

來源

2013-12-18 man

添加寬度speci在'.nav'的CSS中使用，你應該沒問題。 –

嘗試過，沒有工作 – man

你的意思是你想要在按鈕的下方或上方有相同的空間或按鈕的左右相同的空間嗎？ –

添加寬度您.nav類：

.nav { 
    position:relative; 
    bottom:0px; 
    margin:0 auto; 
    width:780px; 
}

來源

2013-12-18 16:19:04

試試這個

.nav { 
    text-align: center; 
}

的原因保證金：0汽車;不起作用是因爲你有div的「內聯塊」。您只能通過從父級居中來對內嵌塊進行居中。

，如果你不希望出現這種情況，你可以嘗試改變這個

.button1, .button2, .button3, .button4, .button5, .button6 { 
    display:inline-block; 
}

這個

.button1, .button2, .button3, .button4, .button5, .button6 { 
    display: block; 
}

來源

2013-12-18 16:10:16 CRABOLO

不起作用... – man

你可以用這個嘗試：

.navholder { 
    text-align:center; 
} 

.nav { 
    display:inline-block; 
}

您的演示http://jsfiddle.net/S6BVL/3/

來源

2013-12-18 16:14:04 DaniP

爲.nav指定width，這對於5個按鈕來說足夠大。它默認爲100％的貨櫃，950px。小提琴：http://jsfiddle.net/S6BVL/2/

來源

2013-12-18 16:14:37 Mooseman

試試這個demo，我加入text-align:center到.navholder和width:800px到.nav：

CSS：

.navholder { 
    width:950px; 
    height:350px; 
    background-color:grey; 
    text-align:center; 

} 

.nav { 
    position:relative; 
    bottom:0px; 
    margin:0 auto; 
    width:800px; 
}

來源

2013-12-18 16:17:23

此作品：

.navholder { 
    width:950px; 
    height:350px; 
    background-color:grey; 
    text-align: center; 
} 

.nav { 
    bottom:0px; 
    margin: auto; 
    display: inline-block; 
}

來源

2013-12-18 16:20:50

或者你也可以添加text-align: center;到.nav

，然後就從.button1, .button2, .button3, .button4, .button5, .button6 {

這樣刪除float: left;：

.nav { 
    position:relative; 
    bottom:0px; 
    text-align: center; 
} 

.button1, .button2, .button3, .button4, .button5, .button6 { 
    width:120px; 
    height:35px; 
    background-color:rgb(204,204,204); 
    margin-left:5px; 
    margin-right:5px; 
    display:inline-block; 
}

這裏的的jsfiddle - http://jsfiddle.net/S6BVL/8/

來源

2013-12-18 16:22:18 MElliott

父母不能水平中心div

回答

相關問題