Flexbox垂直文本对齐 [英] Flexbox vertical text alignment

问题描述

使用Flexbox，我正在尝试实现以下目标:

Using Flexbox, I'm trying to achieve this:

但是我要说的是这一点:

But I'm instead reaching this point:

这是到目前为止我所能做的(省略了供应商前缀).如果有人可以帮助使其在Firefox或Chrome中正常运行，我将非常感谢.

Here is what I've got so far (vendor prefixes omitted). If someone could help get this working well in either Firefox or Chrome, I'd very much appreciate it.

img {
  max-width: 100%;  
}

.container {
  display: flex; 
 justify-content: center;
 flex-wrap: wrap;
}

.item,
.img-wrapper {
  align-items: center;
}

.item {
  display: flex;
  flex-direction: column;
  width: 300px;
}

.img-wrapper {
  flex-grow: 1;
  flex-shrink: 0;
}

<div class="container">
    
          
  <div class="item">          
    <div class="img-wrapper">            
      <img src="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919" alt="">            
    </div>

    <div class="excerpt-wrapper">
      <p>ghostbusting since 1938&nbsp;ghostbusting since 1938&nbsp;ghostbusting since 1938&nbsp;ghostbusting since 1938&nbsp;ghostbusting since 1938&nbsp;</p>
    </div>
  </div>
  
  <div class="item">          
    <div class="img-wrapper">            
      <img src="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241" alt="">            
    </div>

    <div class="excerpt-wrapper">
      <p>Text goes here</p>
    </div>
  </div>  
      
</div>

推荐答案

align-items属性仅适用于flex容器.

The align-items property applies only to flex containers.

您已将其应用于img-wrapper:

.item,
.img-wrapper {
  align-items: center;
}

...但是此元素不是flex容器.

...but this element is not a flex container.

由于img-wrapper没有应用display: flex或display: inline-flex，因此align-items被忽略.

Since img-wrapper does not have display: flex or display: inline-flex applied, align-items is being ignored.

尝试一下:

.item,
.img-wrapper {
  align-items: center;
  display: flex;
}

.container {
  display: flex;
  justify-content: center;
}
.item {
  display: flex;
  flex-direction: column;
  width: 300px;
}
.item,
.img-wrapper {
  align-items: center;
  display: flex;
}
img {
  max-width: 100%;
}
.img-wrapper {
  flex-grow: 1;
  flex-shrink: 0;
}
.excerpt-wrapper > p {
  margin: 0;
}

<div class="container">
  <div class="item">
    <div class="img-wrapper">
      <img src="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919" alt="">
    </div>
    <div class="excerpt-wrapper">
      <p>ghostbusting since 1938</p>
      <p>ghostbusting since 1938</p>
      <p>ghostbusting since 1938</p>
      <p>ghostbusting since 1938</p>
      <p>ghostbusting since 1938</p>
    </div>
  </div>
  <div class="item">
    <div class="img-wrapper">
      <img src="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241" alt="">
    </div>
    <div class="excerpt-wrapper">
      <p>ghostbusting since 1938</p>
      <p>ghostbusting since 1938</p>
    </div>
  </div>

并且左列中的文本在该位置垂直对齐的唯一原因是因为它恰好位于照片底部边缘的位置.

And the only reason the text in the left column is vertically aligned in that location is because that happens to be where it meets the bottom margin of the photo.

如果要使右列中的文本在同一位置对齐，请将顶部元素作为图像或框，使其高度与相邻列中的表亲相同.

If you want the text in the right column to be aligned in the same spot, make the top element an image or box equal in height to its cousin in the adjacent column.

.container {
  display: flex;
  justify-content: center;
}
.item {
  display: flex;
  flex-direction: column;
  width: 300px;
}
.item,
.img-wrapper {
  align-items: center;
  display: flex;
}
img {
  max-width: 100%;
}
.img-wrapper {
  /* flex-grow: 1; */
  flex-shrink: 0;
  height: 269px;
  width: 291px;
  justify-content: center;
}
.excerpt-wrapper > p {
  margin: 0;
}

<div class="container">
  <div class="item">
    <div class="img-wrapper">
      <img src="//cdn.shopify.com/s/files/1/1275/8407/files/slimer_79b77a4e-547a-4ba0-ad4f-831ec15d53aa_800x800.jpg?v=1481846919" alt="">
    </div>
    <div class="excerpt-wrapper">
      <p>ghostbusting since 1938</p>
      <p>ghostbusting since 1938</p>
      <p>ghostbusting since 1938</p>
      <p>ghostbusting since 1938</p>
      <p>ghostbusting since 1938</p>
    </div>
  </div>
  <div class="item">
    <div class="img-wrapper">
      <img src="//cdn.shopify.com/s/files/1/1275/8407/files/100x100_800x800.png?v=1481762241" alt="">
    </div>
    <div class="excerpt-wrapper">
      <p>ghostbusting since 1938</p>
      <p>ghostbusting since 1938</p>
    </div>
  </div>

这篇关于Flexbox垂直文本对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！