O HyperText Markup Language (HTML) é ótimo para colocar para fora a estrutura de uma página web, mas se você quiser adicionar um pouco de estilo ao layout, mais cedo ou mais tarde você vai encontrar-se abraçando o poder e elegância de Cascading Style Sheets (CSS). CSS irá permitir-lhe o estilo quase tudo que você pode imaginar em uma página da web - e é frequentemente muito mais fácil do que você pensa. Com CSS, centrando-se uma página web inteira pode ser realizado com apenas algumas linhas curtas de código.
Coisas que você precisa
- editor de texto ou HTML
Abra a página web em um editor de texto ou um editor de páginas da web que permite editar HTML diretamente.
Coloque o corpo de sua página dentro de uma tag DIV. Como o objetivo é centralizar toda a página web, este deve ser apenas sobre tudo dentro da tag BODY. Coloque o
tag imediatamente após a tag e colocar o fechamentoetiquetar pouco antes da marca de fechamento.Dê o
marcar uma ID de modo que as informações de estilo pode ser atribuído a ele. Este artigo vai assumir que é chamado "página," para que o seu código deve ser algo como:.Criar um link para o arquivo CSS que contém as instruções de estilo para a página. Não se preocupe se você não tem um arquivo CSS ainda. Você terá a chance na próxima etapa.
Na secção HTML CABEÇA (entre o
e Tag), adicione um link para a sua folha de estilo usando . Certifique-se os href aponta para o local adequado e nome da sua folha de estilo. Você também pode usar uma URL completa aqui se você quer ser muito específico.Criar uma folha de estilo (CSS) arquivo se você ainda não tem um que você está usando para esta página. Isso não é nada mais do que um arquivo de texto simples e você pode nomeá-lo o que quiser, mas é recomendável que você dá a ele uma extensão .css. O nome do arquivo deve corresponder ao local de folha de estilo que você colocar na seção HEAD da sua página web.
Abra seu arquivo CSS e definir o estilo para o ID DIV em torno de seu conteúdo. Se o ID do tag DIV é "página," em seguida, o código ficaria assim:
página {margin-left: auto
IR
margin-right: auto
IR
}Se você quiser especificar as margens superior e inferior, também, então você pode encurtar este ainda mais usando o seguinte:
página {margin: 0 auto 0 auto
IR
}Isto lhe daria uma margem superior de 0px, margem direita "auto," margem inferior 0px ea margem esquerda do "auto" respectivamente.
Salve o arquivo e, em seguida, recarregar a página no seu navegador para confirmar que ele está centrado. Se as coisas não estão centrados corretamente, certifique-se de tudo que você quer centrado está entre as tags DIV criados anteriormente e que o link para seu folha de estilo está apontando para o local correto.
dicas & avisos
- Embora seja completamente aceitável para colocar as informações de estilo CSS diretamente no código HTML da página, você vai achar que é muito mais eficiente para manter os dados em um arquivo separado que não só permite que você se concentrar em estilo e HTML separadamente, mas também reutilizar as informações de estilo em várias páginas sem ter que recriá-lo o tempo todo.