Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Aender

[Resolvido] Centralizar Div dentro da outra tanto na horizontal c

Por , em Desenvolvimento frontend

Recommended Posts

Aender    3

Aender
Postado

Pessoal tudo bem ?

Estou necessitando de um ajudinha aqui.Estou começando em CSS e não estou conseguindo centralizar uma DIV dentro da outra, gostaria de centralizar essa Div tanto na horizontal como na vertical dentro de uma outra Div, mas não saco muito de posicionamento em CSS ainda ,já quebrei a cabeça mas não consigo.Desde já, agradeço a colaboração de todos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Aender    3

Aender
Postado

Oi Aender, bom nesse site tem umas dicas... da uma olhada.

 

http://rogeriolino.wordpress.com/2007/01/17/css-centralizar-horizontal-e-vertical/

 

beleza ? já tinha visto um tutorial parecido com esse e não consegui, acho que esse tutorial se aplica quando desejamos centralizar a Div em relação à tela (área total da página ) não em relação a outra Div.No meu caso eu quero centralizar uma Div dentro de outra Div Horizontal e vertical.Mas agradeço pela ajuda. Vlw.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vih    2

Vih
Postado

Beleza!

desse site tem bastante coisa sobre css http://www.maujor.com/tutorial/centrar-vertical.php

e no exemplo q ele traz tem duas div uma dentro da outra alinhada verticalmente.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
 <title>Universal vertical center with CSS</title>
 <style>
   .greenBorder {border: 1px solid green;} /* bordas para maior visibilidade do exemplo */
 </style>
</head>

<body>
<div class="greenBorder" style="display: table; height: 400px; #position: relative; overflow: hidden;">
<div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
<div class="greenBorder" style=" #position: relative; _top: -50%">
aqui texto<br>
aqui textot<br>
aqui mais conteúdo, de um banco de dados por exemplo<br>
tudo centrado na vertical     
</div>
</div>
</div>
</body>
</html>

da uma estudada no site certamente tem o q você precisa.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diegus Miestro    21

Diegus Miestro
Postado

A grande jogada da centralização vertical está no Display

 

#table {
width: 1024px;
height: 1024px;
display: table; <!-- Display da TAG Pai -->
}
#cell {
width: 512px;
height: 512px;
display: table-cell; <!-- Display da TAG Filho -->
vertical-align: middle;
}

 

O atributo vertical-align: middle; é usado em uma célula de uma tabela, e você define a TAG pai para ser interpretada como uma Tabela e a filha como célula de uma tabela. Lembrando que a altura do pai deve ser maior que do filho para o efeito funcionar.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito