• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

joaorosa

[RESOLVIDO] Alinhar uma div centralmente

16 mensagens neste tópico

boas...

tou com uma dúvida! como é que posso alinhar uma div no centro?

eu tenho este código:

#tudo {
width:800px;
height:600px;
background-color:#999999;
}

cps

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

no css do body, colocas text-align:center e no css do #tudo colocas margin: auto...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O código que o marinheiro deu é bom e úitl, mas se a div tiver texto este vai ficar no centro.

Se colocares o código assim o texto não alinha ao centro e a div alinha na mesma:

#exemplo {
margin: 0 auto;
}

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

estávamos a falar só em centrar a div... para alinhar os elementos dentro dessa div, depois tem de adoptar o text-align que quiser...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Eu sei mas se ele quisesse alinhar a div ao centro e o texto dessa div À esquerda tinha de fazer como eu disse porque como tu explicas-te colocava tudo ao centro.

Não estou a dizer que a tua explicação está incorrecta, pelo contrário, está correctíssima mas há alguns problemas que surgem do text-align para posições de elementos sem ser texto.

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

a questão é que se não colocares o text-align:center no css do body, no ie a div não fica centrada... por isso é que tem sempre de se utilizar as duas definições como eu coloquei acima... depois, para tudo o resto ficar alinhado normalmente, tem de se definir na div que engloba tudo o text-align pretendido para ficar por defeito...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

pois é,

Esqueci-me que o IE estraga sempre tudo, lol

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

a questão é que se não colocares o text-align:center no css do body, no ie a div não fica centrada... por isso é que tem sempre de se utilizar as duas definições como eu coloquei acima... depois, para tudo o resto ficar alinhado normalmente, tem de se definir na div que engloba tudo o text-align pretendido para ficar por defeito...

Isso só acontece se não tiveres um DOCTYPE válido (que dispare o rendering strict), salvo erro. Se tiveres (XHTML, por ex.), basta por "margin: auto;" no elemento a ser centrado.

Já agora outra hipótese para quem usa posicionamento absoluto:

#xpto

{

left: 50%;

width: 100px;

margin-left: -50px;

}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Percebi tudo do teu código menos o margin de -50px.

Para que serve retirar margin se queremos colocar o elemento ao centro?

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

atenção que é para posicionamentos absolutos... é para ficar exactamente onde tu queres...

lê de cima para baixo:

left:50% -> a borda esquerda começa a partir do centro do ecran

width:100px -> o elemento tem 100px de largura

margin-left:-50px -> como o elemente tem os 100px e começa a partir do centro do ecran, tens de o chegar metade da largura para a esquerda...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

AHhh..

Já percebi o margin negativo...

Obrigado pela explicação...

Cumps.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

neste momento já me apresentaram várias soluções... mas para que server os doctypes, e quais são eles?

cps

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O DOCTYPE basicamente vai indicar ao browser quais os elementos válidos num documento. Convem usar um DOCTYPE relativo á linguagem usada (HMTL, XHTML, etc.), e programar conforme o que se usa. Um exemplo será o elemento <font>, que não está definido no DOCTYPE XHTML, mas existe no HTML.

Em termos práticos, os browsers tentam "desenrascar-se" da melhor forma quando existem erros deste género, e muitas vezes pode até nem dar-se pela falta dele (do DOCTYPE), mas convém sempre usar. Até porque em termos de validade de código, sem o DOCTYPE certo o documento não é considerado válido. Em termos de box model (a maneira como a largura/altura/posição dos elementos é interpretada), os browsers recentes tem 2 modos, o "strict" e o "quirks". O quirks tenta emular o comportamento do IE 5, já o "strict" é o modo "standard compliant". Convém sempre tentar usar o modo "strict" (pelo menos em projectos novos), de forma a que os diferentes browsers existentes se comportem de uma forma "mais ou menos" semelhante, e reduzir os problemas e bugs encontrados. E as dores de cabeça! :confused:

Fica aqui uma lista dos diferentes DOCTYPES existentes para HTML e XHTML.

EDIT: typo.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

muito obrigado...

e por ex. o dreamweaver e o visual studio automatiamente os selecionam perante as nossas escolhas entre html e xhtml, né?

cps

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Sim, exacto. Quer dizer, nunca mexi no Visual Studio, mas suponho que sim.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora