Publicado em 19 de mai.

Alinhar conteúdo verticalmente dentro de uma div

Tenho uma div de 180 pixels de largura por 50 pixels de altura por exemplo, como faço pra alinhar o conteúdo ao meio?

http://forum.imasters.com.br/public/style_emoticons/default/ermm.gif

Discussão (3)

Entre ou cadastre-se para participar da discussão

Giovanni Ritchie· 20 de mai.

Considere a adição de mais marcação, tipo, você precisa adicionar uma div ao contedudo, atribuir um tamanho p ela e posicionar ela, fiz um exemplo aqui:

<html>
	<head>
 <style type="text/css">
 div#content {
 width:180px;
 height: 50px;
 background: red;
 }
 div#content div#interna {
 margin: 0 auto;
 background: white;
 width: 80%;
 margin: 0 auto;
 }
 </style>

	</head>
	<body>
 <div id="content">
 <div id="interna">klçajsdljasld</div>
 </div>
	</body>
</html>

nesse cado eu deu 80% do 150px da div contet... aí vai depender d você, você pode ainda em vez d percentagem dar outro valor fixo, depende do seu trabalho..

OBS: o exemplo acima eu só centralizo na horizontal, se você quiser tbm na vertical é simples, você só precisa criar um contexto de posicionamento na div#content dando um position: relative; nela, depois na div#interna faça {position: relative; width:largura; height: altura; left:50%; top:50%, margin-let:-largura/2; margin-top:-altura/2}

Abraço ;)

~Thiago Lara· 20 de mai.

É eu gostaria de alinhar verticalmente, mas não entendi muito bem essa segunda parte aí não, eu defino variáveis e divido por 2?

Isso é válido no CSS?

fiquei curioso,

abração

Giovanni Ritchie· 20 de mai.

>
É eu gostaria de alinhar verticalmente, mas não entendi muito bem essa segunda parte aí não, eu defino variáveis e divido por 2?

Isso é válido no CSS?

fiquei curioso,

abração

hehee.. não defini variavel não, só coloquei altura/largura para você entender q aí deve ser a metade da largura e a metade da altura da sua div, não é válido isso em CSS...