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)
Carregando comentários...