Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Centralização

Prezados bom dia,

Eu marquei a opção correta: "borda azul, fundo vermelho, texto branco, centralizado com 700px de largura", concordei com a maioria dos atributos, porém não entendi o motivo de considerarmos que o conteúdo ficará centralizado se isso não foi declarado na classe.

<div class="principal centralizado">

div {
    border: 1px solid blue;
    color: orange;
}

.principal {
    background-color: red;
    color: white;
}

.centralizado {
    width: 700px;
    margin: 0 auto;
}
4 respostas

Priscilla, eu testei esse exemplo agora, e o que ocorre é que ele está centralizando esta div com a classe "principal centralizado" na horizontal.

Se você inserir dentro desta div um texto, ele vai continuar na esquerda.

No caso de ter um texto dentro desta div, para que ele fique centralizado dentro desta área de 700 pixels de largura, você precisa acrescentar na classe "centralizado" o text-align:center;

Daniel,

Eu acho que eu não formulei bem a minha dúvida. Eu não entendi o motivo de ter esse: "centralizado com 700px de largura". Por que está considerando que está centralizando se os atributos da classe centralizado são só a largura e margem?

Complementando o que o Danial falou acima. O conteúdo se refere a tudo que está envolvido pela div.

O alinhamento do conteúdo difere do alinhamento dos elementos textuais.

solução!

Olá Priscila!

Quando você colocou definiu a classe centralizado com as propriedades width e margin, você declarou que ele terá largura de 700px e margens 0 e auto, ou seja, 0 na direção vertical e automático na horizontal. Esse auto tentará colocar o máximo possível onde declarado, no caso, tanto para a esquerda quanto para a direita. Em elementos com display: block e com largura determinada, isso causa a centralização do elemento. :)

Espero ter ajudado! ;)

Fábio