Usando largura, max-width e margin: auto;
Como mencionado no capítulo anterior; um elemento de nível de bloqueio sempre ocupa toda a largura disponível (estende-se à esquerda e à direita o mais longe que puder).
Definir a width de um elemento nível de bloco irá impedi-lo de que se estende para as bordas de seu recipiente. Em seguida, você pode definir as margens para auto, para centrar horizontalmente o elemento dentro de seu recipiente. O elemento vai ocupar a largura especificada, eo espaço restante será dividido igualmente entre as duas margens:
Nota: O problema com o <div> acima ocorre quando a janela de navegador é menor do que a largura do elemento. O navegador, em seguida, adiciona uma barra de rolagem horizontal para a página.
Usando max-width em vez disso, nesta situação, vai melhorar a movimentação do navegador de pequenas janelas. Isso é importante quando fazer um site usável em dispositivos pequenos:
Dica: redimensionar a janela do navegador para menos de 500px de largura, para ver a diferença entre as duas divs!
Aqui é um exemplo das duas divs acima:
Exemplo
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
} Tente você mesmo "