Вертикально выровнять два деления рядом друг с другом на одну высоту?

Question

Я хочу выровнять два элемента div (или что-то похожее) рядом друг с другом на одну высоту.

Также обертка, содержащая два элемента div, должна быть выровнена по центру по вертикали.

Пробовал что-то вроде этого

.wrapper {
  background-color: #f1f1f1;
  height: 300px;
  width: 50%;
  margin: 0 auto;
  display: table;
}

.innerWrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: fit-content;
}

.box {
  display: inline-block;
  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>

Я хочу, чтобы высота двух div была одинаковой, независимо от содержимого внутри каждого div.

Answer 1

Да, вы также можете достичь этого, используя 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>

.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;
}

Вот кодекс

Answer 2

Без 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 3

У меня есть решение, которое использует display: table;.Вы также можете указать максимальную высоту или ширину, теперь она просто заполнена внутри контейнера.

.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;
}

<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>

В любом случае, вы можете использовать flex, flexbox, grid ....

Answer 4

добавить flex к .innerWrapper и margin-right к .box

.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;
}

<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 5

Вы можете сделать это с помощью 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 6

просто используйте display: flex; в .innerWrapper

.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;
}

<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>

или если вы хотите коробку посередине.

.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;
}

<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>