How to align center vertically each element of a div?

Question

I'm trying to align center vertically each element of a div but I can't do it. I have tried with vertical align but it isn't working. What is going wrong?

I want each element centered like this

.banner {
  display: flex;
  justify-content: center;
  align-items: center;
}

<section class="banner" id="banner">
  <div class="banner-text">
    <h2>Hola, yo soy <span>Diego Donoso</span>.</h2>
    <h3>Técnico Analista Programador.</h3>
    <a href="#about" class="btn">Sobre Mí</a>
  </div>
</section>

score 3 · Accepted Answer · edited Sep 04 '21 at 05:45

3

when u are making .banner a flexbox then it aligns its direct child not the child inside the child(.banner-text), due to this the align properties are applied to .banner-text not to the content inside .banner-text this might help you, make the div(banner-text) a flexbox too, and then use property justify-content to horizontally align and align-items to vertically align it. Try out this:

.banner-text {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

<section class="banner" id="banner">
  <div class="banner-text">
    <h2>Hola, yo soy <span>Diego Donoso</span>.</h2>
    <h3>Técnico Analista Programador.</h3>
    <a href="#about" class="btn">Sobre Mí</a>
  </div>
</section>

edited Sep 04 '21 at 05:45

showdev

28,454
37
55
73

answered Sep 04 '21 at 05:29

Abhishek Tomar

70
1
7

1

yes, use flex-flow : column no-wrap; property too thanks for the suggestion – Abhishek Tomar Sep 04 '21 at 05:43
1

thanks bro this works without adding flex-direction: column; . Thanks ! – Diego Donoso Sep 04 '21 at 05:56

score 1 · Answer 2 · answered Sep 04 '21 at 05:27

1

i think you can achieve this with simpler approach like this:

.banner{
text-align:center;

}
.banner h2, .bannerh3{
 line-height:28px;
}

please check this https://jsfiddle.net/2djyza47/

answered Sep 04 '21 at 05:27

Moneer Kamal

1,837
16
25

this works too but i think it's more better the first answer, thanks bro. – Diego Donoso Sep 04 '21 at 05:57

How to align center vertically each element of a div?

2 Answers2