-1

Estou tendo um problema enorma para centralizar um texto embaixo de uma imagem no Bootstrap. Já tentei de tudo, com 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>

Qual a melhor forma de centralizar verticalmente e horizontalmente o texto, para se adaptar tanto a textos com 2 linhas, quanto com 3, ou com uma só (como Redação)?

2
  • Qual versão do Bootstrap?
    – hugocsl
    Commented 2/08/2018 às 21:41
  • 1
    3.3.5. Esqueci de comentar. Na 4 eu consigo tranquilo, mas estou mexendo na 3.3.5 num projeto antigo e tenho que me adequar.. Commented 2/08/2018 às 21:59

3 Respostas 3

0

Amigo, use a tag <center><h1>Texto</h1></center> Ela vai centralizar exatamente no centro

4
  • Ou a classe text-center do bootstrap. Commented 2/08/2018 às 21:48
  • E na vertical como fica? Ele não quer só na horizontal pelo que eu entendi
    – hugocsl
    Commented 2/08/2018 às 21:51
  • Ai ele usa um sistema de grid, e seleciona as colunas nos lugares desejados. getbootstrap.com/docs/4.0/layout/grid Commented 2/08/2018 às 21:52
  • Posta um exemplo ai pra ajuda seu colega, sua resposta está muito incompleta e não responde a pergunta.
    – hugocsl
    Commented 2/08/2018 às 21:55
0

Utilize os atributos da funcionalidade de layout 'grid' do bootstrap: 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>
2
  • Estou usando a versão 3.3.5 e não possui o justify-content-center Commented 2/08/2018 às 22:05
  • Atualizei o exemplo para a versão apropriada Commented 2/08/2018 às 22:12
0

Tenta o vertical alignment do bootstrap link: https://getbootstrap.com/docs/4.4/utilities/vertical-align/

ou na div 'pai' você coloca no css = align-itens: center; ai ele alinha todos os 'filhos' verticalmente

ou na tag que você quer alinhar coloca o css = align-self: center; ai a própria tag se alinha ao centro.

Mas claro tudo isso dentro de uma div com o css de display: flex; para poder usar o flex-box

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .