There is a block which contains the picture and under it the text.
How to align this content in the center?

enter image description here

display: flex; justify-content: center; align-content: space-between;

Does not help.

  • one
    align-items: center - Vasily Barbashev
  • Pictures then also become centered but to the left of the text. And I need them to be above the text. - Alexander
  • 2
    how they become on the left, it’s something with layout. Never had such problems - Vasily Barbashev

1 answer 1

Specify the direction for building elements and everything will work:

 .container { display: flex; justify-content: center; align-content: space-between; align-items: center; flex-direction: column; } .container.demo { border: 1px solid black; width: 300px; height: 200px; } 
 <div class="container demo"> <img src="https://satyr.io/40x40/2"> <p>Lorem ipsum dolor sit amet</p> </div>