Programação

Centralizar texto na vertical com CSS

Salve Salve, estou finalizando um projeto que eu precisava centralizar texto na vertical dentro de uma div, independente do número de linhas, pesquisei algumas soluções na internet, vi diversas pessoas sugerindo o uso de tabelas (uh =P), mas consegui achar uma solução interessante.

Veja aqui o exemplo

Centralizar texto na vertical

Agora vamos criar a marcação HTML, onde iremos criar 3 divs, uma dentro da outra, ficando com o código mais ou menos assim:

<div class="tudo">
    <div class="tudoCentro">
      <div class="centro">
        aqui vai o texto da linha 1<br>
        aqui vai o texto da linha 2<br>
        aqui vai o texto da linha 3<br>
        aqui vai o texto da linha 4
      </div>
    </div>
  </div>

Agora já temos o HTML para centralizar texto na vertical dentro de uma div, porém ainda falta o CSS, e é ele quem fará a mágica da parte que falta, então, meu CSS do exemplo ficou assim:

.tudo {     
	border: 1px solid;
    display: table;
    float: left;
    height: 400px;
    margin-right: 50px;
    overflow: hidden;
    width:200px;
	}
.tudoCentro { 
	#position: absolute; 
	#top: 50%;
	display: table-cell; 
	vertical-align: middle; 
	width:200px;
	}
.centro { 
	#position: relative; 
	#top: -50%; 
	border:1px solid; 
	}

Pronto, agora você aprendeu a centralizar texto na vertical com CSS, então pode fazer as modificações necessárias no CSS para ter o layout que você precisa.

Ess código foi testado no Firefox 23, Google Chrome 29, Internet Explorer, 10, 9, 8. No IE7 não consegui fazer funcionar, então se alguém fizer esse ajuste, comente para ajudar a outras pessoas.

Fonte: jakpsatweb

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    2 respostas para Centralizar texto na vertical com CSS

    1. denilson escreveu em 10 de dezembro de 2014

      melhor forma de todas:

      —- css —–
      div{
      float: left;
      }

      div div{
      /**/
      border: 1px solid black;
      background: #FFA500;
      border-radius:100%;
      height: 200;
      width: 200;
      /**/
      float:left;
      position: relative;
      }

      div div div{
      border: none;
      background:none;
      top:40%;
      text-align: center;
      }

      —- html —-

      Texto
      Texto
      Texto
      Texto
      Texto
      Texto
      Texto
      Texto
      Texto
      Texto

    2. Qcabeca escreveu em 14 de dezembro de 2014

      Maravilha Denilson, obrigado por compartilhar, vou atualizar o post e colocar a sua opção, citando você como fonte, Ok? Sucesso ae, abraço.

    Envie seu comentário.

    Seu email não será publicado