Flexbox vertical text alignment

问题

Using Flexbox, I'm trying to achieve this:

But I'm instead reaching this point:

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>

回答1:

The align-items property applies only to flex containers.

You have it applied to img-wrapper:

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

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

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

Try this:

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

jsFiddle

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>

jsFiddle

回答2:

If you need the display to adapt to a variable images size, and don't have problems with the width of the container (that is, you can set a size for it beforehand , or at least a maximum widtyh that will be wide enough for the content)

The you can change the flex direction to row, reorder the items so that the images go first, and force a wrap at the end of the images:

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

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

来源：https://stackoverflow.com/questions/41175624/flexbox-vertical-text-alignment

标签

html

css

css3

flexbox