如何居中对齐我的2列布局

Question

我试图让两个内联块div在中心对齐

为什么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>

Answer 1

您已将列的宽度设置为40％。小数学2 * 40 = 80％。你有100％的父元素。将宽度更改为50％，您将不会有任何空格。

Answer 2

你必须考虑到包装器的作用是100％而不是80％。

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

Answer 3

即使使用Flex也会很好。

＆＃13;

＆＃13;

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

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

inline-block元素可以通过text-align从父级（此处为body）居中。

处理空格：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>