Publicado em 6 de jul.

Alinhamento vertical de textos com CSS

Olá galera do Imasters, bom dia a todos ...

Uma dificuldade que vejo quando estamos começando a dar os primeiros passos, é referente ao alinhamento vertical de textos, para alinharmos um texto horizontalmente, sabemos que podemos fazer isso facilmente com CSS, usando a declaração "text-align: center;", dessa maneira:

<style type="text/css">
 div.texto {
 width: 600px;
 height: 300px;
 float: left;
 border: 1px solid #000;
 text-align: center;
 }
</style>
<div class="texto">
 <p>Este é o texto que alinhar horizontalmente</p>
</div> <!-- /div.texto -->

Até ai tudo bem, e como estamos vendo esse tópico para centralizar verticalmente, só acrescemos a declaração "line-height: 300px;", dessa maneira:

<style type="text/css">
 div.texto {
 width: 600px;
 height: 300px;
 float: left;
 border: 1px solid #000;
 text-align: center;
 line-height: 300px;
 }
</style>
<div class="texto">
 <p>Este é o texto que alinhar verticalmente</p>
</div> <!-- /div.texto -->

Note que o "line-height: 300px;" tem o valor da mesma altura da "div" hein, sempre tem que ter o valor da mesma altura da div, caso contrário não ficará totalmente alinhado verticalmente. Abraços!!!

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

André do Vale· 8 de jul.

E quando o texto quebrar de linha? :rolleyes:

Wanderson Valerio· 9 de jul.

Não entendi bem @Andre Campos, pode exemplificar?

André do Vale· 9 de jul.

Troque o conteúdo do paragrafo por:

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper consequat enim, in porta lorem varius a. Nunc in urna aliquet magna aliquet fermentum sed non quam. Suspendisse aliquet, ipsum in euismod varius, lectus nisl interdum lacus, quis egestas diam orci id orci. Phasellus pretium, diam id laoreet suscipit, leo lacus luctus dui, vel aliquet mauris eros eu diam. Duis at enim in purus mattis tincidunt auctor eget sem."

E veja o que ocorre. :thumbsup:

Para corrigir isso, retire o line-height que se comporta com a altura total do elemento, e utilize um filho como se fosse uma célula de tabela (que aí sim aceita vertical middle): (obs.: IE8+ e demais browsers)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vertical align</title>
<style>
.teste {
width: 900px;
height: 900px;
background: lightgrey;
text-align: center;
}

.teste p {

display: table-cell;
height: 900px;
vertical-align: middle;
}
</style>
</head>

<body>
<div class="teste">
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper consequat enim, in porta lorem varius a. Nunc in urna aliquet magna aliquet fermentum sed non quam. Suspendisse aliquet, ipsum in euismod varius, lectus nisl interdum lacus, quis egestas diam orci id orci. Phasellus pretium, diam id laoreet suscipit, leo lacus luctus dui, vel aliquet mauris eros eu diam. Duis at enim in purus mattis tincidunt auctor eget sem.</p>
</div>
</body>
</html>