How to align vertically and horizontally element within a Row in Bootstrap?

Question

I’m having a huge problem centering a text under an image in Bootstrap. I’ve tried everything, with position, table-Cell.

.bloco-materia {
  text-align: center;
  padding: 25px 50px;
  height: 200px;
  background: #eee;
  margin: 10px 0;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
    transform: translate3d(0,0,0);
    transition-property: box-shadow,transform;
    transition-duration: 400ms;
    transition-timing-function: cubic-bezier(.16,1,.29,.99);

}

.bloco-materia:hover  {
    filter: saturate(1.5);
    transform: translate3d(0,-4px,0);
    box-shadow: 0 12px 30px 0 rgba(0,0,0,.2);
    transition-property: box-shadow,transform;
    transition-duration: 600ms;
    transition-timing-function: cubic-bezier(.16,1,.29,.99);
}

.bloco-materia img{
  height: 80px;
  background: #000;
  display: block;
    margin: 0 auto;
}

.bloco-materia:hover img {
  transform: scale(1.2);
}

.bloco-materia:hover  h1 {
  transform: scale(0.9);
  opacity: 1;
}

.bloco-materia img, .bloco-materia h1 {
    transition-property: all;
    transition-duration: 600ms;
    transition-timing-function: cubic-bezier(.16,1,.29,.99);
}

.bloco-materia h1 {
  font-family: 'SegoeUI', sans-serif;
  font-weight: bold;
  font-size: 25px;
  color: #fff;
  opacity: 0.6;
  height: 95px;
  display:table-cell; 
  vertical-align:middle;

}

<div class="col-md-4">
				<a href="#">
				<div class="bloco-materia" style="background: #b26a00">
					<img src="#">
					<h1>Texto</h1>
				</div>
				</a>
			</div>
      
 			<div class="col-md-4">
				<a href="#">
				<div class="bloco-materia" style="background: #357a38">
					<img src="../assets/images/materias/ciencias-natureza.png">
					<h1>Ciências da Natureza e suas Tecnologias</h1>
				</div>
				</a>				
			</div>

What is the best way to center the text vertically and horizontally, to adapt both to texts with 2 lines, or with 3, or with only one (as Editorial Staff)?

Answer 1

Try the Alignment vertical of the bootstrap link: https://getbootstrap.com/docs/4.4/utilities/vertical-align/

or in the div 'pai' you put in the css = align-itens: center; then he lines up all the 'filhos' vertically

or in the tag that you want to align puts the css = align-self: center; there itself tag aligns to the center.

But of course all this within one div with the css de display: flex; to use the flex-box

Answer 2

Buddy, use the tag <center><h1>Texto</h1></center> It will center right in the center

Answer 3

Use the attributes of the bootstrap grid layout feature: https://bootstrapdocs.com/v3.3.5/docs/examples/grid/

<div class="container">
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <a href="#">
        <div class="bloco-materia" style="background: #b26a00">
          <img src="#">
            <h1 class="text-center">Texto</h1>
        </div>
      </a>
    </div>    
  </div>
  <div class="row">
    <div class="col-md-4 col-md-offset-4">
      <a href="#">
        <div class="bloco-materia" style="background: #357a38">
           <img src="../assets/images/materias/ciencias-natureza.png">
             <h1 class="text-center">Ciências da Natureza e suas Tecnologias</h1>
        </div>
      </a>
    </div>    
  </div>
</div>