在flex div的中间垂直对齐内容

Question

我想在垂直对齐的中间对齐div的内容。 表格单元格在这里将无法正常运行，因为事实是，parent是并且必须在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 。

这是有关Flexbox的出色视觉指南，将来可能会对您有所帮助。

Answer 2

在.right-33>div:first-child创建一列 flexbox并使用justify-content: center 对齐 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;垂直居中对齐的设置是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>