如何居中對齊我的2列布局

進出口試圖使兩個inline-block的div的在中心如何居中對齊我的2列布局

對齊爲什麼會出現在DIV

.wrapper { 
 
    border: red 2px solid; 
 
    min-width: 40%; 
 
    display: inline-block; 
 
} 
 

 
body { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    border: 1px black solid; 
 
}

<div class="wrapper"> 
 
    <h1> 
 
    hello 
 
    </h1> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <h1> 
 
    hello 
 
    </h1> 
 
</div>

右側空白

來源

2017-09-17 Saddy

的可能的複製【如何去掉inline-block的之間的空間元素？]（https://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements） –

你試過了：'body {text-align：center;}' ，爲t他的差距，如果'body {font-size：0;} .wrapper {font-size：1rem}'沒有告訴你什麼，請按照前面評論的鏈接:) –

你必須考慮到包裝是在100％的基礎上行事，而不是80％。

.wrapper { 
    border: 2px red solid; 
    min-width: 50%; 
    display: inline-block; 
}

來源

2017-09-17 20:05:57

即使使用Flex也不錯。

.wrapper { 
 
    border: red 2px solid; 
 
    min-width: 40%; 
 
    display: block; 
 
    flex: 1; 
 
} 
 

 
body { 
 
    display: flex; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    border: 1px black solid; 
 
}

<div class="wrapper"> 
 
    <h1> 
 
    hello 
 
    </h1> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <h1> 
 
    hello 
 
    </h1> 
 
</div>

來源

2017-09-17 20:08:53

你有你的列的寬度設置爲40％。小數學2 * 40 = 80％。你有100％的父元素。將寬度更改爲50％，並且不會有任何空白。

來源

2017-09-17 20:10:24

inline-block元素可以通過父母（此處爲body）的text-align居中。

爲應對空白：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

text-align + font-size可以是一個開始：

body{font-size:0;text-align:center} .wrapper{font-size:1rem} 
 

 
.wrapper { 
 
    border: red 2px solid; 
 
    min-width: 40%; 
 
    display: inline-block; 
 
} 
 

 
body { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    border: 1px black solid; 
 
}

<div class="wrapper"> 
 
    <h1> 
 
    hello 
 
    </h1> 
 
</div> 
 

 
<div class="wrapper"> 
 
    <h1> 
 
    hello 
 
    </h1> 
 
</div>

來源

2017-09-17 20:27:07

如何居中對齊我的2列布局

回答

相關問題