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