在弯曲的div中间垂直对齐内容

Question

我想对齐div的内容垂直对齐的中间。表细胞将无法正常工作在这里，由于这样的事实，即父，必须显示弹性。这是在新的WordPress古滕贝格编辑器使用。我不想，如果可以修改编辑器本身并单独用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

创建一个列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 3

设置用于柔性儿童的垂直居中对齐是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>