Flexbox垂直文本对齐方式

Question

使用Flexbox，我试图实现这个目标：

但我反而达到了这一点：

这是我到目前为止所获得的（供应商前缀省略）。如果有人可以帮助在Firefox或Chrome中使其运行良好，我非常感谢。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

align-items属性仅适用于Flex容器。

您已将其应用于img-wrapper：

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

...但此元素不是灵活容器。

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

试试这个：

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

jsFiddle

左列中的文字在该位置垂直对齐的唯一原因是因为恰好是它与照片底部边缘相交的位置。

如果您希望右列中的文本在同一位置对齐，请将顶部元素的高度设置为与相邻列中的表兄弟相等。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

jsFiddle

Answer 2

如果您需要显示器以适应可变图像大小，并且没有容器宽度的问题（也就是说，您可以预先设置它的大小，或者至少是最大的widtyh将足够广泛的内容）

您可以将弹性方向更改为行，重新排序项目以使图像先行，并在图像末尾强制换行：

＆＃13;

＆＃13;

.container {
  display: flex; 
 flex-wrap: wrap;
}

.container:after {
  content: "";
  order: 15;
  width: 9999px;
}

.container div {
  width: 200px;
}

.img-wrapper {
  order: 10;
  text-align: center;
}

.excerpt-wrapper {
  order: 20; 
  border-top: solid 1px red;
}

img {
  max-width: 100%;  
  
}

＆＃13;

<div class="container">
    
          
    <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 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>

＆＃13;

＆＃13;

＆＃13;