how to vertically center a h2 tag inside the div

Navigation
1

I would like to leave the text that is inside these% vertically centered% 

<div class="col-md-2 buttom-area">
  <div class="text-center button-disciplina button-border">
    <h2>Realizar Chamada</h2>
  </div>
  <div class="text-center button-disciplina button-border">
    <h2>Realizar Chamada</h2>
  </div>
  <div class="text-center button-disciplina button-border">
    <h2>Realizar Chamada</h2>
  </div>
  <div class="text-center button-disciplina a">
    <h2>Realizar Chamada</h2>
  </div>
</div>

I tried to use <h2> but I could not. how do you leave each vertical align within those h2 vertically centered on them?

    
asked by anonymous 29.03.2018 / 19:43

3 answers

-1

In the parent element use display: table and in the child element use display: table-cell . So vertical-align: middle will work. 

.button-disciplina{
  width: 80%;
  height: 150px;
  display: table;
  border: solid 1px #000;
  border-radius: 10px;
  margin: 10px auto;
}

h2{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-2 buttom-area">
  <div class="text-center button-disciplina button-border">
    <h2>Realizar Chamada</h2>
  </div>
  <div class="text-center button-disciplina button-border">
    <h2>Realizar Chamada</h2>
  </div>
  <div class="text-center button-disciplina button-border">
    <h2>Realizar Chamada</h2>
  </div>
  <div class="text-center button-disciplina a">
    <h2>Realizar Chamada</h2>
  </div>
</div>
    
29.03.2018 / 20:18
0

In case you wanted this result: 

h2{
  text-align: center;
}
<div class="col-md-2 buttom-area">
  <div class="text-center button-disciplina button-border">
    <h2>Realizar Chamada</h2>
  </div>
  <div class="text-center button-disciplina button-border">
    <h2>Realizar Chamada</h2>
  </div>
  <div class="text-center button-disciplina button-border">
    <h2>Realizar Chamada</h2>
  </div>
  <div class="text-center button-disciplina a">
    <h2>Realizar Chamada</h2>
  </div>
</div>
    
29.03.2018 / 20:07
0

You can use transform as suggested by our colleague hugocsl , but alignment using transform is considered a hack of the css, because it is not exactly what it serves, although it works.

A more modern approach is using flexbox. You can use it to align the elements vertically / horizontally, like this; 

.button-disciplina {
  background-color: #0fc0fc;
  height: 100px;
  margin-bottom: 10px;
}

.text-center-hv {
  display: flex;
  align-items: center;
  justify-content: center;
}
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

<div class="col-md-2 buttom-area">
  <div class="text-center-hv button-disciplina button-border">
    <h2>Realizar Chamada</h2>
  </div>
  <div class="text-center-hv button-disciplina button-border">
    <h2>Realizar Chamada</h2>
  </div>
  <div class="text-center-hv button-disciplina button-border">
    <h2>Realizar Chamada</h2>
  </div>
  <div class="text-center-hv button-disciplina a">
    <h2>Realizar Chamada</h2>
  </div>
</div>

Remembering that if you are using Bootstrap 4, it already has the align-items-center and justify-content-center utility classes, which can be used together with d-flex to have the same effect.

    
29.03.2018 / 20:22
EC2 instance not loading the Apache envvars file Ideas for a question involving html and css [closed]