parent <section> 中的两个 <div> "columns"，试图使 right-hand div 相对于 parent 垂直居中。

Question

我有一个包含两个 div 的文件，它们形成两个 "columns"，类名是 context_left 和 context_right。左侧列的高度 div 大于右侧。左侧列的宽度为 30%，右侧列的宽度为 45%。右侧列 div 是 right-floated。如果我删除右侧浮动或降低宽度，右侧 div 列将消失。

parent没有定义高度。如何让右手相对于 parent 高度垂直对齐？

HTML代码:

<section>
        <div class="content context_left">
              <p>Lorem Ipsum (This is actually a long paragraph)</p>
              <p>Lorem Ipsum (So is this one) </p>
              <p style="padding: 5%;">
                        <b>Foo Bar</b>
                    </p>
                    <p>
                        Lorem Ipsum (long paragraph 3)
                    </p>
                </div>
                <div class="context_right">
                    <img src="foo.svg" alt="bar" id="logo">
                </div>
            </section>

CSS代码：

section {
overflow: hidden;
}

.context_left{
    display: inline-block;
    width: 30%;
    margin-left: 10%;
    overflow: hidden;
    float: left;
    text-align: left;
    vertical-align: middle;
    font-family: 'Lato';
    font-weight: 300;
    font-size: medium;
} 

.context_right{
    display: inline-block;
    height: 300px;
    float: right;
    line-height: 300px;
    width: 45%;
    padding-right: 10%;
}  /* This is the one I'm trying to vertically align relative to <section> */

我尝试过的：

--将parent显示为table，将child显示为table-cells并设置vertical-align为中间 --设置parent和child显示为inline-table和vertical-align --尝试在 parent 上使用 display: flex 来创建一个我可以垂直对齐的 flexbox --定义 parent 的高度以便我可以使用 vertical-align （没关系，没用） --改变字体大小 -- 将位置设置为绝对（可怕的重叠元素）

我不能使用绝对定位或额外的填充，因为它在移动设备上看起来很糟糕。另外，使用 top: 50% 似乎将它推得比左列高度定义的高度的一半更远，所以它不是一个可以缩放的相对选项。 S.O 是什么意思。推荐？

Answer 1

你的意思是这样的吗：

section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

section>div {
  border: 1px solid;
}

section>div:nth-child(1) {
  -webkit-box-flex: 0.3;
  -ms-flex: 0.3;
  flex: 0.3;
}

section>div:nth-child(2) {
  -webkit-box-flex: 0.45;
  -ms-flex: 0.45;
  flex: 0.45;
  -ms-flex-item-align: center;
  -ms-grid-row-align: center;
  align-self: center;
}


/* This is the one I'm trying to vertically align relative to <section> */

<section>
  <div class="content context_left">
    <p>Lorem Ipsum (This is actually a long paragraph)</p>
    <p>Lorem Ipsum (So is this one) </p>
    <p>
      <b>Foo Bar</b>
    </p>
    <p>
      Lorem Ipsum (long paragraph 3)
    </p>
  </div>
  <div class="context_right">
    <img src="foo.svg" alt="bar" id="logo">
  </div>
</section>

parent <section> 中的两个 <div> "columns"，试图使 right-hand div 相对于 parent 垂直居中。

Two <div> "columns" within a parent <section>, trying to vertically center the right-hand div relative to the parent.

html

css

vertical-alignment