时间戳

首页 > 解决方案 > 在 flexed div 的中间垂直对齐内容

html - 在 flexed div 的中间垂直对齐内容

问题描述

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

标签： htmlcssflexboxwordpress-gutenberg

解决方案

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

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

这是您更新的JSFiddle。

这是一个很棒的关于 Flexbox 的可视化指南，它可能会在将来对你有所帮助。

推荐阅读