Entrar Ainda não tem acesso?
3
respostas

A parte do main (de email, telefone, etc) não quer centralizar

Referente ao curso HTML5 e CSS3 parte 3: trabalhando com formulários e tabelas, no capítulo Começando um formulário e atividade Estilos para o formulário

por Breno Guedes Dos Santos
| 38.6k xp | 1 posts

header{ background: url("tema.jpeg"); }

.caixa{ position: relative; width: 940px; margin: 0 auto; }

nav { position: absolute; top: 110px; right: 0; }

nav li{ display: inline; margin: 0 0 0 15px; }

nav a{ text-transform: uppercase; color: #000000; font-weight: bold; font-size: 22px; text-decoration: none; }

nav a:hover{ color: #c78c19 }

footer { text-align: center; background: url("bg.jpg"); padding: 40px 0; }

.copyright { font-size: 20px; margin: 20px 0 0; color: white; }

main { width: 940px; margin: 40px 0; }

form{ margin: 40px 0; }

form label{ display: block; }

form input{ display: block; }

3 respostas
por Eduardo Tioma
| 233.8k xp | 261 posts
Instrutor

Oi Breno!

Para centralizar horizontalmente utilizamos o calculo automático através do valor auto na propriedade margin. Porém no seu código, o margin horizontal está com o valor 0.

Substitua

main { width: 940px; margin: 40px 0; }

por

main { width: 940px; margin: 0 auto; }

E o layout deve ficar centralizado.

Espero ter ajudado! Qualquer outra dúvida pode postar aqui!

por Karla Saldanha de Paula
| 6.1k xp | 4 posts

Olá, meu main e form também não estão centralizando. 

main {
    width: 940px;
    margin: 0 auto;
}

form {
    margin: 40px 0;
}

form label {
    display: block;
}

form input {
    display: block;
}
por Luis Dias
| 2598k xp | 2199 posts
Developer PHP (⌐■_■)

Karla, o seu 'main' deve está centralizado

Usando a "ferramenta do desenvolvedor" (F12) vc vai ver q o "main" está centralizado em relação a página.

Isso não quer dizer q o elementos dentro do 'main' vão estar centralizados

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Você pode colocar uma cor de fundo para visualizar melhor

main {
    width: 940px;
    margin: 0 auto;
    background-color: yellow;
}