23 replies to this topic

[Marcos Aurélio]

Galera como alinhar um DIV dentro de outro DIV sem usar aquele famoso <DIV align=center...?

Exemplo

<DIV 1>

<DIV align=center> <- SEM USAR ISSO

<DIV 2> <- Alinhar este div

</DIV 2>

</DIV> <- SEM USAR ISSO

</DIV 1>

Lembrando que text-align não funcionar...

[bdoweb]

vc já tentou no div pai colocar um text-align: center ????

[Marcos Aurélio]

não funciona

Lembrando que text-align não funciona...

¬¬"

Edição feita por: Marcos Aurélio, 23/02/2007, 10:28.

['' sem.Ponto]

Tente assim:

<DIV>
	<DIV>
		<DIV>
			<h2>Div não Centralizada</h2>
		</DIV>
		<DIV align="center">
			<h1>Div Centralizada</h1>
		</DIV>
	</DIV>
</DIV>

Se não for isso, passe mais detalhes...

Edição feita por: '' sem.Ponto, 23/02/2007, 15:22.

[Gustavo B. A.]

Pessoal, estou com o mesmo problema, preciso alinhar um div que está dentro de outro SEM O USO DE ALIGN="CENTER" e o TEXT-ALIGN:CENTER; NÃO ESTÁ FUNCIONANDO.
Alguém tem uma saída para este problema?

Conto com vocês!

[sTriKe]

e se tu bota assim :

<DIV 1>


<DIV 2 align=center> <- Alinhar este div

</DIV 2>


</DIV 1>

Edição feita por: sTriKe, 01/04/2007, 18:14.

[Gustavo B. A.]

sTriKe, a questão de não usar ALIGN="CENTER" não é porque ele não funciona, e sim por uma questão de validação do xhtml.
Consegui um geito de fazer isso só com CSS. É só colocar no css do div que quer centralizar MARGIN:0 AUTO; e pronto o div vai centralizar.
Mesmo assim obrigado.
Flw!

[Angelo Lima]

<div style="margin:0 auto; width:500px;">

AQUI JA ESTÁ CENTRALIZADA....

<div style="margin:0 auto; width:300px;"> AQUI ESTÁ ALINHADA DENTRO DA DIV JÁ ALINHADA ... </div>

</div>


[]´s

[BGGMB]

<div style="margin:0 auto; width:500px;">

AQUI JA ESTÁ CENTRALIZADA....

<div style="margin:0 auto; width:300px;"> AQUI ESTÁ ALINHADA DENTRO DA DIV JÁ ALINHADA ... </div>

</div>


[]´s

Exato, mais vou por um exemplo de uma forma mais simples.

<div>

<div style="width:500px; margin:0 auto 0 auto;">

conteudo

</div>

</div>

Lembrando que uma qualquer tag com largura fixa e margin 0 auto fica alinhada ao centro.

[Alex Hiroshi]

E funciona no IE? O margin auto nem sempre funciona direito no IE.

Para ficar mais simples. BGGMB, o margin pode ficar só como margin: 0 auto;

[BGGMB]

E funciona no IE? O margin auto nem sempre funciona direito no IE.

Para ficar mais simples. BGGMB, o margin pode ficar só como margin: 0 auto;

Sim funciona perfeitamente no IE quando aplicado corretamente.


Sobre o margin:0 auto 0 auto; eu sempre procuro colocar top width bottom left pra ter um melhor controle sobre o elemento.

exemplo, quero uma div alinhada do centro com margin-top 5px e margin-bottom 10px, qual a melhor forma? margin:5px auto 10px auto;

[Alex Hiroshi]

Sim, nesse caso a melhor forma é fazer isso mesmo. Mas em casos onde o top e bottom ou left e right são iguais, é melhor usar do jeito que eu postei, assim você deixa o seu arquivo menor.

[apocalipse1412]

Bah, é complicado alinhamento de DIV, mas nem tanto

<div class="AlinhamentoUm">
<div class="AlinhamentoDois"></div>
</div>

Onde os Styles são:
.AlinhamentoUm {position: relative;}
.AlinhamentoDois{ position: absolute; bottom:15px; right: 15px; }

//coloquei botton e right pq queria alinhar o conteudo

na base e a direita, mas ha outros parametros.

Se você entende de DIV e STYLES vai conseguir..

Valeu?!

[Édipo Costa Rebouças]

muda o doctype para xhtml strict que o 0 auto funcina perfeitamente no ie6, mas mesmo assim, deixo o text-align: center para os outros browsers antes do ie6....

mas por que razão não usar o text-align:center? ele valida, mas vc tem que usar no css...

em vez de vc usar o atributo align do html, vc usa o style="text-align: center", valida perfeitamente.

nota: concordo com o alex, se vc declarar margin: 0 auto; vc ainda esta declarando os quatro atributos, 0 para as margens verticais e auto para as horinzontais.... o que não pode ficar é vc declarar 3 valores.

o que pode é:

margin: x
margin: x y;
margin: x y z k;

o que não pode é:

margin: x y z;
margin: x y z k a b c d e f g .... ;

atenção o text-align: center funciona somente no ie, que por bizarrice alinha div com isso.

para browser decentes vc tem que colocar o margin: 0 auto, no div filho.

Edição feita por: Édipo Costa Rebouças, 21/10/2008, 11:04.

['' sem.Ponto]

Esse tópico é meio antigo né, as dúvidas foram postadas há quase 2 anos atrás...

Édipo, claro que pode colocar 3 valores na propriedade margin.

1º valor - top
2º valor - right e left
3º valor - bottom