使用flexbox垂直对齐内容

Question

I am creating a tile where the image can either be 50% of the tile or 75% of the tile and content will fill the remaining area/ space left. My issue is I don't want to set a specific height for the image as it will lose it's image/aspect ratio. I have something like the following below:

const tile= () => (
  <StyledWrapper>
    <StyledImageBlock>
      //get Image here
    </StyledImageBlock>
      <StyledTextContent>
        {getTitleOne()} //this is a span element
        {getTitleTwo()} //this is a span element
      </StyledTextContent>}
  </StyledWrapper>
);

In my StyledWrapper I have the following:

  text-align: center;

  a {
    text-decoration: none;
  }

In my StyledImageBlock I have the following:

  width: 100%;

In my StyledTextContent I have the following:

align-content: center;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;

But items refuse to be vertically aligned, I set a height on the StyledWrapper to height: 700px just for demo and still refuses. Where am I going wrong here? Any suggestions on how to achieve what I have described.

Some more information. I can achieve the desired result when setting a percentage height on the image and content but with this the image aspect ration changes to be worse/ stretches the image which I do not want. Ultimately this tile will be going into a flexbox grid.

Answer 1

You probably need to put

justify-content: center;
align-items: center;

on StyledWrapper . This will center the StyledImageBlock vertically and horizontally.

Answer 2

in the <StyledWrapper> set.

justify-content: center; to center in x-axis, and,

align-items: center; to center in the.

The parent element when you define display: flex is a box, where you can set how the childs will interact.

flex-basis ( Set width of the first element, affect the element where is defined )

flex-direction ( Set direction of how element will be display , to be use in parent class of childs fleboxes )

flex-grow ( How width it's gonna take an element in the x-axis, affect the element where is defined)

flex-flow ( How it's display the childs in the x-axis, to be use in parent class of childs fleboxes )

flex-shrink ( How width it's gonna take to shrink, affect the element where is defined)

flex-wrap ( forced onto one line or can wrap onto multiple lines, to be use in parent class of childs fleboxes )