0

I've this situation :

<div class="row">       
    <div class="col-sm-6 col-sm-offset-3 text-center" id="testo-centrale">
        <h1>IL BOX PIU' GRANDE DELLA TOSCANA<BR>CON AFFILIAZIONE CROSSFIT INC.</h1>
        <h2>Prova Prova prova prova</h2>
    </div>      
</div>

CSS :

#testo-centrale {height:500px;}

The texts, h1 and h2, are centered in horizontal but i want also in vertical !

Thanks guys !

Siful Islam
  • 1,906
  • 3
  • 21
  • 31
Antonio Carbone
  • 115
  • 4
  • 13

1 Answers1

0

You can use flexbox with align-items: center; to center vertically.

#testo-centrale {
  height: 500px;
  display: flex;
  align-items: center;
  flex-direction: column;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-sm-6 col-sm-offset-3 text-center" id="testo-centrale">
    <h1>IL BOX PIU' GRANDE DELLA TOSCANA<BR>CON AFFILIAZIONE CROSSFIT INC.</h1>
    <h2><?php the_field('testo_centrale_chi_siamo'); ?></h2>
  </div>
</div>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
  • It works but not totally. the h1 is on the left and the h2 on the right, instead h1 above and h2 below. – Antonio Carbone Feb 20 '17 at 16:18
  • @AntonioCarbone ah sorry, (I mean _lo siento_!) I can't read the text so I didn't notice that. Just needs `flex-direction: column;` - updated my answer. – Michael Coker Feb 20 '17 at 16:27