Skip to content

Centralize um documento com um layout de largura fixa usando CSS

24 de maio de 2021

Layouts de largura fixa podem ser difíceis de centralizar com alguns dos navegadores populares que existem, mas é possível, com apenas algumas linhas de código.

Veja como

  1. Crie uma nova página da web com uma folha de estilo CSS em seu editor de HTML.
  2. Crie um elemento div como o elemento principal na página onde você armazenará tudo na página.
  3. Dê a esse elemento div um ID exclusivo na página.
  4. Abra sua folha de estilo CSS e defina a largura do seu elemento div: div # main {width: 750px; }
  5. Adicione margens automáticas para centralizar seu div: div # main {width: 750px; margem esquerda: automático; margem direita: auto}
  6. Para corrigir isso no Netscape 4 e no IE 4 – 6 (modo peculiaridades), adicione um alinhamento de texto no corpo: body {text-align: center; }
  7. Mas então todo o texto interno é centralizado, então realinhe o texto em seu div #main adicionando text-align: left; lá: div # main {width: 750px; margem esquerda: automático; margem direita: automático; alinhamento de texto: esquerda; }
  8. Salve sua página e sua folha de estilo.
  9. Teste seu trabalho em vários navegadores da web.

Isso centralizará a caixa de layout, mas não o conteúdo dentro dela. Use o alinhamento de texto para centralizar o conteúdo interno.

Formato mla apa chicago Sua Citação

Kyrnin, Jennifer. “Centralize um documento com um layout de largura fixa usando CSS.” ThoughtCo, maio. 14 de 2021, thinkingco.com/center-document-with-fixed-width-layout-3466906.
Kyrnin, Jennifer. (2021, 14 de maio). Centralize um documento com um layout de largura fixa usando CSS. Obtido em https://www.thoughtco.com/center-document-with-fixed-width-layout-3466906
Kyrnin, Jennifer. “Centralize um documento com um layout de largura fixa usando CSS.” ThoughtCo. https://www.thoughtco.com/center-document-with-fixed-width-layout-3466906 (acessado em 24 de maio de 2021).