Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Dúvida de Centralização de tabela e de botão (input)

Referente ao curso HTML5 e CSS3 parte 4: avançando no CSS, no capítulo Design responsivo e atividade Adaptar uma página para celular

por Estudante
| 93.2k xp | 38 posts

Boa noite!

Não tenho experiência com CSS, sou iniciante e ao fazer o ajuste da página de Contatos, achei melhor fazer a centralização do Botão enviar e da Tabela de dias de funcionamento. Aplicando alguns conhecimentos aprendidos no curso, consegui fazer a centralização do botão e da tabela.

O que me gerou dúvida foi o fato de ter centralizado de formas diferentes a Tabela e o Botão. Para conseguir centralizar o botão dentro do meu formulário (form) acrescentei o seguinte no CSS:

.btn_enviar {
    display: block;
    margin: 0 auto;
}

Mas só consegui centralizar a tabela fazendo o seguinte:

.tabela_funcionamento table { /* esta table está dentro de uma div */
    margin: 0 auto;
}

O que me intrigou é que se eu usar display: block na regra da tabela ela fica alinhada do lado esquerdo da minha div (.tabela_funcionamento). Tive que deixar apenas configurada a margem.

Tanto o formulário, quanto a div da minha página tem as mesmas regras:

.form_contato, .tabela_funcionamento {
    width: 940px;
    margin: 40px auto;
}

Isso significa que as Tabelas e os Inputs se comportam de formas diferentes no CSS ? por que eles não puderam ser centralizados a partir de uma mesma regra?

3 respostas
solução!
por Luciano
| 517.5k xp | 399 posts

Olá Bruno,

isso acontece basicamente porque existem dois grupos de elementos html:

  • Em linha
  • Em bloco

Cada grupo se comporta diferente em relação ao css permitido e aplicado sobre ele.

Tables e inputs pertencem a grupos distintos, assim, cada um terá que ser alinhado de uma forma.

No caso dos input, para alinhá-los ao center utilizando margin: 0 auto; será preciso transformá-lo em um bloco, com display: block;. Do contrário, tería que aplicar text-align: center; ao seu elemento pai, que poderia ser um div.

No caso da tabela, que já é um elemento em bloco, vc não utiliza o display: block, pois isso irá alterar a exibição das células. Nela, é só definir uma largura e alinhar com margem automática.

Segue um exemplo onde centralizo dois input de forma distinta, como mencionado acima.

por Estudante
| 93.2k xp | 38 posts

Oi Luciano! Obrigado por responder. Acessando o seu link de exemplo pude entender melhor o que você disse.

Mas se o elemento na div pode ser centralizado a partir de um text-align: center;, por que você utilizou o margin: 0 auto; ? 

.elemento-pai {
  text-align: center;    /* essa declaração sozinha fez a centralização */
  margin: 0 auto; /* essa declaração é dispensável para realizar a centralização??  */
}

Como você sabe, por exemplo, que a table é um elemento em bloco? É claro, você já pode estar acostumado a estilizar páginas, mas onde eu posso obter essas informações para saber como centralizar outros elementos HTML? Conhece algum artigo onde eu possa aprender mais sobre isso?

por Luciano
| 517.5k xp | 399 posts
Mas se o elemento na div pode ser centralizado a partir de um text-align: center;, por que você utilizou o margin: 0 auto; ?

Realmente, o margin: 0 auto;nesse caso não era necessário. Já que o p, como elemento de bloco, por padrão, ocupará 100% da página e o text-align irá centralizar seu conteúdo. O margin auto só seria importante se tivesse definido uma largura pro elemento, como tinha feito antes e depois não o retirei. Obs.: Alterei para div .

Como você sabe, por exemplo, que a table é um elemento em bloco?

Segue uma referência