CSS 弹性框 - 如何使项目垂直居中并具有全高背景

debugcn 发表于 Dev

安迪

我试图在垂直居中的框中对齐一些文本，同时确保背景颜色拉伸全高。

HTML：

<div class="feature-content">
<div class="feature-visual">
    <div class="embed-container">
        <iframe src="https://player.vimeo.com/video/214852366?controls=0&amp;hd=1&amp;autohide=1" title="Factory Pattern &amp; REHAU" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" width="640" height="312" frameborder="0"></iframe>
    </div>
</div>
<div class="quote">
    <div class="words">Improved our conversion rates to a level that far surpassed expectation.
    </div>
</div>

CSS：

article section.case-study .feature-content {
    align-items: stretch;
    align-content: stretch;
    display: flex;
    padding-top: .35em;
}
article section.case-study .feature-content .feature-visual {
    flex-grow: 1;
    flex-basis: 65%;
}
article section.case-study .feature-content .quote {
    align-self: stretch;
    background: #db6f72;
    color: #FFF;
    flex-basis: 35%;
    flex-grow: 1;
    position: relative;
}
article section.case-study .feature-content .quote .words {
    font-family: "Georgia", serif;
    font-size: 2em;
    font-style: italic;
    line-height: 1.5;
    padding-top: 4.5em;
    width: 80%;
}

当前的实时版本在这里https://factorypattern.co.uk/case-study/rehau-interactive-touchscreen/

在此处显示我想要的样子：在此处输入图像描述

非常感谢任何帮助:)

用户7207170

您需要进行以下更改以将项目与 .quote 容器的中心对齐：

首先，从您的 .words CSS 中删除 padding-top:4.5em 否则 Y 偏移量将向下移动。
其次，将 .quote 的显示更改为 flex，然后使用 align-items 属性垂直对齐 .quote 容器中间的 .word 容器。 (display:flex; align-items:center;) in .quote

.feature-content {
  align-items: stretch;
  align-content: stretch;
  display: flex;
  padding-top: .35em;
}

.feature-visual {
  flex-grow: 1;
  flex-basis: 65%;
}

.quote {
  align-self: stretch;
  background: #db6f72;
  color: #FFF;
  flex-basis: 35%;
  flex-grow: 1;
  position: relative;
  display:flex;
  align-items: center;
}

.words {
  font-family: "Georgia", serif;
  padding-left:2em;
  font-size: 2em;
  font-style: italic;
  line-height: 1.5;
  width: 80%;
}

<div class="feature-content">
  <div class="feature-visual">
    <div class="embed-container">
      <iframe src="https://player.vimeo.com/video/214852366?controls=0&amp;hd=1&amp;autohide=1" title="Factory Pattern &amp; REHAU" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" width="640" height="312" frameborder="0"></iframe>
    </div>
  </div>
  <div class="quote">
    <div class="words">Improved our conversion rates to a level that far surpassed expectation.
    </div>
  </div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。