如何居中div的水平線？

我需要三個盒子居中並水平排列。現在，我已在中心，但只在垂直方向：如何居中div的水平線？

enter image description here

這裏是盒子的CSS：

.box { 
    margin-left: auto; 
    margin-right: auto; 
    background-color: #9FDCED; 
    display: block; 
    height: 400px; 
    width: 500px; 
}

任何幫助將不勝感激。

來源

2015-05-04 HowToGaming

請加入小提琴和你的預期結果的更詳細的圖像。我不確定，但我相信你正在垂直和水平混合。 – timo

我只是想讓這3個盒子水平排列，而不是垂直排列 – HowToGaming

只需將float:left;添加到.box類。像這樣

.box { 
    margin: 5px; 
    background-color: #9FDCED; 
    display: block; 
    height: 100px; 
    width: 100px; 
    padding: 5px; 
    float: left; 
}

工作的jsfiddle http://jsfiddle.net/wcvgs1zb/

來源

2015-05-04 11:48:39

但是這個解決方案不再有盒子居中了。現在他們都在屏幕的左側 –

給這個.box一個display: inline-block和vertical-align: top使他們旁邊的海誓山盟對齊。如果將其與<div>環繞它，得到text-align: center，則內聯內容會水平居中。

.container { 
 
    text-align: center; 
 
} 
 

 
.box { 
 
    background-color: #9FDCED; 
 
    display: inline-block; 
 
    height: 50px; 
 
    width: 50px; 
 
    vertical-align: top; 
 
} 
 

 
.box--high { 
 
    height: 75px; 
 
}

<div class="container"> 
 
    <div class="box"></div> 
 
    <div class="box box--high"></div> 
 
    <div class="box"></div> 
 
</div>

水平和垂直居中使用CSS一個很好的資源是https://css-tricks.com/centering-css-complete-guide/

來源

2015-05-04 11:52:43 ckuijjer

非常感謝你:) – HowToGaming

.box1 { 
 
\t display: table; 
 
    margin: 0 auto; 
 
} 
 
.box { 
 
\t background-color: #9FDCED; 
 
\t display: inline-block; 
 
\t height: 200px; 
 
\t width: 200px; 
 
}

<div class="box1"> 
 
\t <div class="box" style="background:#cc0000;"></div> 
 
\t <div class="box" style="background:#cceeff;"></div> 
 
\t <div class="box" style="background:#eeccff;"></div> 
 
</div>

來源

2015-05-04 12:01:36

如何居中div的水平線？

回答

相關問題