Question

我想将两个div（或类似的东西）彼此相邻对齐到相同的高度。

包含两个div的包装器也应该在中心垂直对齐。

尝试过这样的事情

＆＃13;

<div class="wrapper">
    <div class="innerWrapper">
      <div class="box">This is a box</div>
      <div class="box">
        <div>This is a box</div>
        <div>This is a box</div>
      </div>
    </div>
</div>

＆＃13;

{{1}}

＆＃13;

我希望两个div的高度相同，与每个div内的内容无关。

Answer 1

只需在display: flex;

中使用.innerWrapper即可

＆＃13;

.wrapper {
  background-color: #f1f1f1;
  height: 300px;
  width: 50%;
  margin: 0 auto;
  display: table;
}

.innerWrapper {
  display: flex;
  text-align: center;
  width: fit-content;
}

.box {

  padding: 25px 25px;
  opacity: 0.8;
  background-color: #32CD32;
}

＆＃13;

<div class="wrapper">
    <div class="innerWrapper">
      <div class="box">This is a box</div>
      <div class="box">
        <div>This is a box</div>
        <div>This is a box</div>
      </div>
    </div>
</div>

＆＃13;

或者如果你想要中间的盒子。

＆＃13;

.wrapper {
  background-color: #f1f1f1;
  height: 300px;
  width: 50%;
  margin: 0 auto;
  display: flex;
  align-items:center;
  justify-content:center;
}

.innerWrapper {
  display: flex;
  text-align: center;
  width: fit-content;
}

.box {
  display: inline-block;
  padding: 25px 25px;
  opacity: 0.8;
  background-color: #32CD32;
}

＆＃13;

<div class="wrapper">
    <div class="innerWrapper">
      <div class="box">This is a box</div>
      <div class="box">
        <div>This is a box</div>
        <div>This is a box</div>
      </div>
    </div>
</div>

＆＃13;

Answer 2

您可以使用 Flexbox 执行此操作：

.wrapper {
  background-color: #f1f1f1;
  height: 300px;
  width: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.innerWrapper {
  display: flex;
  text-align: center;
}

.box {
  padding: 25px 25px;
  opacity: 0.8;
  background-color: #32CD32;
}

<div class="wrapper">
    <div class="innerWrapper">
      <div class="box">This is a box</div>
      <div class="box">
        <div>This is a box</div>
        <div>This is a box</div>
      </div>
    </div>
</div>

Answer 3

将flex添加到.innerWrapper，将margin-right添加到.box

＆＃13;

.wrapper {
  background-color: #f1f1f1;
  height: 300px;
  width: 50%;
  margin: 0 auto;
  display: table;
}

.innerWrapper {
  display: flex;
  vertical-align: middle;
  text-align: center;
  width: fit-content;
}

.box {
 margin-right: 15px;
  padding: 25px 25px;
  opacity: 0.8;
  background-color: #32CD32;
}

＆＃13;

<div class="wrapper">
    <div class="innerWrapper">
      <div class="box">This is a box</div>
      <div class="box">
        <div>This is a box</div>
        <div>This is a box</div>
      </div>
    </div>
</div>

＆＃13;

Answer 4

我有一个使用.wrapper { background-color: #f1f1f1; height: 300px; width: 50%; margin: 0 auto; display: table; } .innerWrapper { vertical-align: middle; text-align: center; width: fit-content; display:table-row; } .box { padding: 25px 25px; opacity: 0.8; background-color: #32CD32; display:table-cell; }的解决方案。您也可以在容器内放置最大高度或宽度，现在它已经满了。

＆＃13;

<div class="wrapper">
    <div class="innerWrapper">
      <div class="box">This is a box</div>
      <div class="box">
        <div>This is a box</div>
        <div>This is a box</div>
      </div>
    </div>
</div>

＆＃13;

{{1}}

＆＃13;

无论如何，你可以使用flex，flexbox，grid ....

Answer 5

没有flexbox

您需要调整表类的使用，如下所示：

.wrapper {
  background-color: #f1f1f1;
  height: 300px;
  width: 50%;
  margin: 0 auto;
  display: table;
  border-spacing:10px;
}
/* Added this for centring*/
.wrapper:before,.wrapper:after {
  content:"";
  display: table-row;
}
/**/

.innerWrapper {
  display: table-row; /*modified*/
  text-align: center;
}

.box {
  display: table-cell; /*modified*/
  padding: 25px 25px;
  opacity: 0.8;
  background-color: #32CD32;
}

<div class="wrapper">
    <div class="innerWrapper">
      <div class="box">This is a box</div>
      <div class="box">
        <div>This is a box</div>
        <div>This is a box</div>
      </div>
    </div>
</div>

Answer 6

是的，你也可以使用display: table实现这一点，但你必须稍微更改另一个css。这是一个例子：

<div class="wrapper">
    <div class="innerWrapper">
      <div class="box">This is a box</div>
      <div class="box">
        <div>This is a box</div>
        <div>This is a box</div>
      </div>
    </div>
</div>

＆＃13;

.wrapper {
  background-color: #f1f1f1;
  height: 300px;
  width: 50%;
  margin: 0 auto;
  display: table;
  overflow: hidden;
  position: relative;
}

.innerWrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.box {
  display: table-cell;
  padding: 25px 25px;
  opacity: 0.8;
  background-color: #32CD32;
}

＆＃13;

以下是codepen

垂直对齐两个div彼此相邻到相同的高度？

6 个答案: