Os designs de websites para empresas e outras organizações geralmente incorporam elementos de branding e marketing bem definidos. Se o seu site tiver uma página da Web que você gostaria de centralizar, você mesmo poderá fazer isso usando uma combinação de código HTML e CSS (Cascading Style Sheet). Muitos desenvolvedores usam propriedades de rolagem para elementos de página da Web para ditar propriedades de centralização, mas isso nem sempre é confiável. Para definir um layout de site centralizado e uma página que será exibida sem barras de rolagem, algumas declarações de CSS são necessárias.

1

Crie sua página HTML. Se você tiver uma página com a qual já está trabalhando, abra-a. Caso contrário, crie um novo arquivo em um editor de texto e salve-o com a extensão ".html". Use o seguinte esquema:

Observe que a página tem uma seção para código CSS no cabeçalho e um elemento no corpo. O conteúdo da página deve ser colocado dentro desse elemento. Se você estiver trabalhando com uma página existente, localize o código CSS para ela, que pode ser armazenado em um arquivo CSS separado vinculado ao cabeçalho da sua página.

2

Identifique o contêiner de página em CSS. Para estilizar o elemento que o contém, primeiro você precisa identificá-lo no código CSS. Na seção de estilo no cabeçalho de sua página, ou em um arquivo separado, se é isso que você está trabalhando, adicione o seguinte seletor e esquema:

container {

}

Isso identifica o elemento com "contêiner" como seu atributo de ID. As declarações de estilo para o elemento aparecerão entre os colchetes de abertura e fechamento. Como alternativa, você pode identificar o elemento usando um valor de atributo de classe da seguinte maneira:

.container {

}

Isso identificaria o seguinte elemento:

3

Aplique uma largura fixa ao elemento para centralizar seu conteúdo. Para centralizar os elementos na sua página, o elemento contêiner deve ter uma largura fixa. Adicione um entre os colchetes de CSS para o elemento "container" da seguinte maneira:

largura: 800px;

Altere o valor da altura para se adequar ao seu design. Agora você pode aplicar uma propriedade de margem, que forçará o elemento a centralizar dentro da página:

margem: auto;

4

Impede que o elemento seja deslocado. Se você não quiser que a página role, precisará aplicar uma propriedade height ao elemento container da seguinte maneira:

altura: 90%;

Altere o valor para se adequar ao seu design. Se os elementos dentro do contêiner ocuparem mais espaço do que isso e você desejar impedir a rolagem, será necessário ocultar o estouro do elemento da seguinte maneira:

estouro: oculto;

Isso impedirá que a barra de rolagem apareça, mesmo que o conteúdo da página ocupe mais do que a altura alocada no navegador do usuário.

5

Salve e visualize sua página. Abra-o em um navegador ou faça o upload para o seu site para ver o resultado. Você pode precisar fazer ajustes para chegar ao design desejado. Certifique-se de testar a página depois de ter o conteúdo concluído, pois sua aparência pode variar significativamente.

Gorjeta

• Diferentes navegadores da Web implementam regras CSS de várias maneiras, portanto, teste suas páginas em mais de uma.

Aviso

• Ocultar o excesso de um elemento da página da Web pode impedir que alguns usuários vejam todo o conteúdo da sua página.