代码之家 › 专栏 › 技术社区 › GhostPengy

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

wordpress-gutenberg flexbox css3 css html

0

GhostPengy · 技术社区 · 6 年前

我想在垂直对齐的中间对齐DIV的内容。由于父级是且必须是灵活显示的,因此表单元格在此处不起作用。这是在新的WordPressGutenberg编辑器中使用的。如果可能的话,我不想修改编辑器本身,只使用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;
}

3 回复 | 直到 6 年前

1

3

Helenesh room13 6 年前

您可以将此添加到 wp-block-column 专栏:

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

这是你的最新消息 JSFiddle .

This 是一个伟大的视觉指南对flexbox,它可能会在未来帮助你。

2

1

kukkuz 6 年前

创建一个柱 FrasBox到 .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>

3

0

Johannes 6 年前

用于垂直居中对齐柔性子项的设置为 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>