CSS定心使用顯示塊

當我有一些按鈕，我想一個div內垂直和水平對齊，並且還ontop的彼此的疊加，而不是通過側CSS定心使用顯示塊

到另一側以我CSS我只能似乎讓他們對齊或堆疊，但不是兩者。什麼是正確的方法來做到這一點？

HTML：

<div id="sidePanel"> 
    <div id="buttonContainer"> 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
    </div> 
</div> 

<div id="itemList"> 
    item list 
</div>

CSS：

#itemList { 
    overflow: hidden; 
    background: green; 
} 

#sidePanel { 
    float: right; 
    width: 300px; 
    background: red; 
} 

#buttonContainer { 
    width: 100%; 
    border: 2px solid black; 
    border-radius: 5px; 
    text-align: center; 
} 

#buttonContainer button { 
    display: block; 
}

的jsfiddle：https://jsfiddle.net/gjher92t/

來源

2016-08-22 Simon

你能否幫你想要做什麼「在我的CSS我只能似乎讓他們對齊，或堆棧，但不能同時」擴大 – Aaron

你的意思是你希望他們堆棧和對齊？

如果更改顯示器inline-block，他們將在有足夠的人來填補集裝箱堆場...

#itemList { 
 
    overflow: hidden; 
 
    background: green; 
 
} 
 

 
#sidePanel { 
 
    float: right; 
 
    width: 300px; 
 
    background: red; 
 
} 
 

 
#buttonContainer { 
 
    width: 100%; 
 
    border: 2px solid black; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
} 
 

 
#buttonContainer button { 
 
    display: inline-block; 
 
}

<div id="sidePanel"> 
 
    <div id="buttonContainer"> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    </div> 
 
</div> 
 

 
<div id="itemList"> 
 
    item list 
 
</div>

或改變容器的text-align屬性將它們對準左，而不是中心...

#itemList { 
 
    overflow: hidden; 
 
    background: green; 
 
} 
 

 
#sidePanel { 
 
    float: right; 
 
    width: 300px; 
 
    background: red; 
 
} 
 

 
#buttonContainer { 
 
    width: 100%; 
 
    border: 2px solid black; 
 
    border-radius: 5px; 
 
    text-align: left; 
 
} 
 

 
#buttonContainer button { 
 
    display: inline-block; 
 
}

<div id="sidePanel"> 
 
    <div id="buttonContainer"> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    </div> 
 
</div> 
 

 
<div id="itemList"> 
 
    item list 
 
</div>

或者添加margin: 0 auto讓他們在容器中間堆：

#itemList { 
 
    overflow: hidden; 
 
    background: green; 
 
} 
 

 
#sidePanel { 
 
    float: right; 
 
    width: 300px; 
 
    background: red; 
 
} 
 

 
#buttonContainer { 
 
    width: 100%; 
 
    border: 2px solid black; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
} 
 

 
#buttonContainer button { 
 
    display: block; 
 
    margin:0 auto; 
 
}

<div id="sidePanel"> 
 
    <div id="buttonContainer"> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    <button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    </div> 
 
</div> 
 

 
<div id="itemList"> 
 
    item list 
 
</div>

來源

2016-08-22 08:25:34 Scott

使用margin: auto;中心對準。

#itemList { 
 
    overflow: hidden; 
 
    background: green; 
 
} 
 
#sidePanel { 
 
    float: right; 
 
    width: 300px; 
 
    background: red; 
 
} 
 
#buttonContainer { 
 
    width: 100%; 
 
    border: 2px solid black; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
} 
 
#buttonContainer button { 
 
    display: block; 
 
    margin: auto; 
 
}

<div id="sidePanel"> 
 
    <div id="buttonContainer"> 
 
<button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
<button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
<button type="button" class="btn btn-primary btn-sm">Apple</button> 
 
    </div> 
 
</div> 
 

 
<div id="itemList"> 
 
    item list 
 
</div>

來源

2016-08-22 08:26:33

CSS定心使用顯示塊

回答

相關問題