how to center a <H2> tag vertically inside the div

Asked

Viewed 1,976 times

1

I would like to leave the text within those <h2> 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 the vertical align but I couldn’t. how to leave each h2 within those div vertically centered on them?

css css3 css-font-face

3 answers

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>

  • The class text-center already does this, but aligns horizontally. OP wants to align vertically.

  • exactly Phiter. It performs horizontal alignment. but vertical still does not work

0

You can use the transform as suggested by our colleague hugocsl, but the alignment using transform is considered a "hack" of css, because that’s not exactly what it’s for, 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>

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

  • In my view changing the original display type of the element, which in the case of div is block to flex, just to make an alignment would be much more "Hake" and inelegant, than using Transform:Translate which is precisely to adjust the X and Y coordinates of the element.... But each with their own point of view. The cool thing about CSS is that you can do something in various ways []s

  • By the way, when you run your Snippet on "Whole Page" it doesn’t seem aligned, either vertically or horizontally, then look there. tmj

  • Got it. The horizontal alignment is only in the text within the frames, not in the frames themselves. The boy asked to align only the text within the same frames.

  • Regarding the translate(), its functionality is to reposition an element in the plane 2d where it is, but you can use this function to change the "anchor point" of the element (type in photoshop) using the percentages. Really, there are several ways to do.

-1


In the parent element use display: table and in the child element use display: table-cell. So the 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>

Browser other questions tagged css css3 css-font-face

You are not signed in. Login or sign up in order to post.