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。

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

Answer 2

创建一个列弹性框到.right-33>div:first-child，并使用justify-content: center align 居中-参见下面的演示：

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>

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

3 个答案: