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

Question

Я бы хотел выровнять содержимое div по центру вертикального выравнивания.Ячейка таблицы здесь не будет работать, потому что родительский элемент должен и должен отображаться как flex.Это используется в новом редакторе WordPress Gutenberg.Я не хочу изменять сам редактор, если это возможно, и достигать этого с помощью только CSS.Ниже вы найдете, как выглядит код в данный момент.Пользовательский HTML также нельзя добавить без редактирования редактора.Есть ли возможность этого достичь в текущем состоянии?

Желаемый результат:

Текущий код и состояние: JSFiddle

HTML:

<div class="wp-block-columns has-2-columns right-33">
  <div class="wp-block-column">
     <h3>Some title</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
   </div>
   <div class="wp-block-column">
     <figure class="wp-block-image">Here be image</figure>
   </div>
 </div>

CSS:

h3 {margin: 0 0 20px 0;}
.wp-block-columns {
    display: flex;
    flex-wrap: no-wrap;
    padding: 5px;
    border: solid 1px red;
}
.wp-block-column {
    flex: 1;
    margin-bottom: 1em;
    flex-basis: 100%;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    flex-grow: 0;
    border: solid 1px blue;
}
.right-33 > div:first-child {
    flex-basis: 66.6666%;
    margin-right: 32px;
}
.right-33 > div:last-child {
    flex-basis: 33.3333%;
    margin-left: 32px;
}
.wp-block-image {
  background: green;
  margin: 0 auto;
  width: 100%;
  height: 200px;
}

Answer 1

Создайте столбец flexbox для .right-33>div:first-child и выровняйте по центру, используя justify-content: center - см. Демонстрационный пример ниже:

h3 {
  margin: 0 0 20px 0;
}

.wp-block-columns {
  display: flex;
  flex-wrap: no-wrap;
  padding: 5px;
  border: solid 1px red;
}

.wp-block-column {
  flex: 1;
  margin-bottom: 1em;
  flex-basis: 100%;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
  flex-grow: 0;
  border: solid 1px blue;
}

.right-33>div:first-child {
  flex-basis: 66.6666%;
  margin-right: 32px;
  /*ADDED FLEXBOX*/
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.right-33>div:last-child {
  flex-basis: 33.3333%;
  margin-left: 32px;
}

.wp-block-image {
  background: green;
  margin: 0 auto;
  width: 100%;
  height: 200px;
}

<div class="wp-block-columns has-2-columns right-33">
  <div class="wp-block-column">
    <h3>Some title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
  </div>
  <div class="wp-block-column">
    <figure class="wp-block-image">Here be image</figure>
  </div>
</div>

Answer 2

Параметр, который следует использовать для выравнивания по центру гибких дочерних элементов, составляет align-items: center;, примененный к гибкому контейнеру.Я добавил его в ваш код здесь (в конце раздела CSS):

h3 {
  margin: 0 0 20px 0;
}

.wp-block-columns {
  display: flex;
  flex-wrap: no-wrap;
  padding: 5px;
  border: solid 1px red;
}

.wp-block-column {
  flex: 1;
  margin-bottom: 1em;
  flex-basis: 100%;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
  flex-grow: 0;
  border: solid 1px blue;
}

.right-33>div:first-child {
  flex-basis: 66.6666%;
  margin-right: 32px;
}

.right-33>div:last-child {
  flex-basis: 33.3333%;
  margin-left: 32px;
}

.wp-block-image {
  background: green;
  margin: 0 auto;
  width: 100%;
  height: 200px;
}

.wp-block-columns.has-2-columns.right-33 {
  align-items: center;
}

<div class="wp-block-columns has-2-columns right-33">
  <div class="wp-block-column">
    <h3>Some title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
  </div>
  <div class="wp-block-column">
    <figure class="wp-block-image">Here be image</figure>
  </div>
</div>

Answer 3

Вы можете добавить это в свой wp-block-column столбец:

.wp-block-column {    
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Вот ваш обновленный JSFiddle .

Этот отличныйвизуальное руководство по Flexbox, оно может помочь вам в будущем.