如何在图像贴在底部的 flexbox 中垂直居中文本？

Question

我有 3 列网格，其中包含使用 flexbox 的图像。我遇到的问题是如何使用 flexbox 将中间列中的较小图像正确地放置到底部，并将其余的垂直居中文本 space 。

我的解决方案非常丑陋，反应迟钝，所以我确定这是更好的解决方案。看了一些关于flexbox的文章，看了3个视频课程，没找到这种情况的案例。

也尝试过使较小的图像成为绝对图像，但后来我无法按照自己的意愿将文本垂直居中。

如有任何建议，我们将不胜感激。

.container{
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
img {
    width: 100%;
    height: 100%;
    display: block;
}

.fe2{
  flex: 1;
  text-align: center;
}

.flex-cont-inner {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.flex-cont-inner img {
 height: initial;
}

.message{
  font-size: 2.3vw;
  margin: 0 auto;
}

.message p {
    color: blue;
    font-size: 2vw;
    max-width: 80%;
    margin: 0 auto;
    padding: 34.5% 0px;
}

.author{
  position: relative;
}

.author:after{
          content: 'ANONYMUS';  
          position: absolute;
          font-size: 1vw;
          color:red;
          top: 140%;
}

<div class="container">
   <div class="fe2">
                    <img src="http://lorempixel.com/output/nightlife-h-c-500-700-3.jpg" alt="">
                </div>
                <div class="fe2 no-end">
                    <div class="flex-cont-inner">
                    <div class="message">
                        <p>Lorem ipsum dolor sit amet, consecte adipng elit. Voluptas doloremque dig<span class="author">nissimos </span>repreh!</p>
                    </div>
                    <img src="http://lorempixel.com/output/city-q-c-500-200-4.jpg" alt="">
                    </div>
                </div>
                <div class="fe2">
                    <img src="http://lorempixel.com/output/nightlife-h-c-500-700-2.jpg" alt="">
                </div>
  
</div>

Answer 1

您需要在消息和图片中使用 margin-top: auto;。 Michael_B 关于在 flexbox 中使用自动边距有一个很好的解释。

jsFiddle

代码片段：

.container {
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
img {
  width: 100%;
  height: 100%;
  display: block;
}
.fe2 {
  flex: 1;
  text-align: center;
}
.flex-cont-inner {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.flex-cont-inner img {
  height: initial;
  margin-top: auto;
}
.message {
  font-size: 2.3vw;
  margin-top: auto;
}
.message p {
  color: blue;
  font-size: 2vw;
}
.author {
  position: relative;
}
.author:after {
  content: 'ANONYMUS';
  position: absolute;
  font-size: 1vw;
  color: red;
  top: 140%;
}

<div class="container">
  <div class="fe2">
    <img src="http://lorempixel.com/output/nightlife-h-c-500-700-3.jpg" alt="">
  </div>
  <div class="fe2 no-end">
    <div class="flex-cont-inner">
      <div class="message">
        <p>Lorem ipsum dolor sit amet, consecte adipng elit. Voluptas doloremque dig<span class="author">nissimos </span>repreh!</p>
      </div>
      <img src="http://lorempixel.com/output/city-q-c-500-200-4.jpg" alt="">
    </div>
  </div>
  <div class="fe2">
    <img src="http://lorempixel.com/output/nightlife-h-c-500-700-2.jpg" alt="">
  </div>

</div>

如何在图像贴在底部的 flexbox 中垂直居中文本？

How to center text vertically in flexbox with image stick to the bottom?

html

css

centering

flexbox