Categorias
Web

Centralizar página em div na tela

A forma de exibição das páginas é condicionada pela resolução dos computadores dos usuários que as acessam. A resolução mais utilizada na década passada era a 800 x 600, atualmente a maioria dos usuários utilizam a resolução 1024 X 768 ou maiores.

Tornando muito mais comum os sites com 900 ou 1000 pixels de largura, de modo a evitar a barra de rolagem horizontal. The appearance of web pages is conditioned by the resolution of users’ computers that access them. The highest resolution used in the past decade was 800 x 600, today most users utilize the resolution 1024 X 768 or higher.

Making more common sites with 900 or 1000 pixels wide in order to avoid the horizontal scroll bar. Os usuários com resoluções maiores visualizam um espaço vazio na tela, que pode ser aproveitado por um plano de fundo repetido ou uma imagem em alta resolução.

De todo modo é importante centralizar o conteúdo da página para que a sua exibição em resoluções maiores não fique prejudicada.

As tabelas aceitam o código para alinhamento centralizado, mas as div não. A forma mais simples de centralizar a página criada com div é por meio da propriedade margin e o valor auto, que não é entendida pelos navegadores Internet Explorer 6.0 ou anteriores, criando a necessidade de se realizar outro procedimento.

Crie uma div(aqui chamaremos de content) para delimitar a dimensão horizontal da sua página através da propriedade width. Com a propriedade margin e o valor auto é possível estabelecer as margens automáticas em ambos os lados da página.

A propriedade margin pode segmentar-se em valores específicos para cada lado, topo, baixo, esquerda e direita, mas quando utilizada sem especificações estabelece os valores na ordem: superior, direita, inferior e esquerda. Quando se atribui apenas dois valores eles repetem-se para os seus opostos.

O Internet Explorer realiza a mesma exibição por meio da propriedade text-align com o valor center para o body, utilizamos o “*” antes da propriedade para especificar que o código só deverá ser utilizado pelo Internet Explorer. É o chamado hack do I.E.

No HTML:





No CSS:

body {
margin: 0 ;
*text-align:center; /* hack do IE */
}

#content {
width: 1000px;
margin: 0 auto;
}

Users with higher resolutions visualize an empty space on the screen, which can be used for a background or a repeated image in high resolution.

Anyway it is important to center the content of this page for your higher resolutions viewer do not be prejudiced.

Tables accept the code to center alignment, but div don’t. The simplest way to center the page created with div is through the property margin and the value auto , which is not understood by Internet Explorer 6.0 or earlier, creating the need to perform another procedure.

Create a div (here we will call content) to delineate the horizontal dimension of your page through the property width. With the property margin and the value auto you can establish automatic margins on both sides of the page.

Property margin can be segmented into specific values ​​for each side, top, bottom, left and right, but when used without specification sets out the values ​​in the order: top, right, bottom and left . When you assign only two values ​​it will be repeated to their opposites.

Internet Explorer performs the same view through the property text-align with the value center to the body , use the “*” before the property to specify that the code should only be used by Internet Explorer. It’s called ” I.E. hack “.

On HTML:





On CSS:

body {
margin: 0 ;
*text-align:center; /* hack do IE */
}

#content {
width: 1000px;
margin: 0 auto;
}


5 respostas em “Centralizar página em div na tela”

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.