在 flexed div 中间垂直对齐内容

Question

我想将div的内容在垂直对齐的中间对齐。 Table-cell 在这里不起作用，因为父级是并且必须显示为 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

您可以将此添加到您的 wp-block-column 列：

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

这是您的更新 JSFiddle。

This 是一个很棒的 Flexbox 可视化指南，它可能在将来对您有所帮助。

Answer 2

创建一个 column flexbox 到 .right-33>div:first-child 和 align 使用 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 3

用于 flex 子元素垂直居中对齐的设置是 align-items: center;，应用于 flex 容器。我将它添加到您的代码中（在 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>

在 flexed div 中间垂直对齐内容

Align contents vertically in middle of flexed div

html

css

flexbox

wordpress-gutenberg