El uso de ancho, de ancho máximo y el margin: auto;
Como se ha mencionado en el capítulo anterior; un elemento a nivel de bloque siempre ocupa todo el ancho disponible (se extiende hacia la izquierda y la derecha tanto como sea posible).
Ajuste de la width de un elemento en bloque evitará que se extiende hacia los bordes de su contenedor. A continuación, puede establecer los márgenes de automóviles, para centrar horizontalmente el elemento en su contenedor. El elemento tomará el ancho especificado, y el espacio restante será dividido en partes iguales entre los dos márgenes:
Nota: El problema con el <div> anterior se produce cuando la ventana del navegador es menor que la anchura del elemento. El navegador entonces agrega una barra de desplazamiento horizontal a la página.
Usando max-width en su lugar, en esta situación, mejorará la manipulación del navegador de pequeñas ventanas. Esto es importante cuando se hace un sitio utilizable en dispositivos pequeños:
Consejo: Cambiar el tamaño de la ventana del navegador a menos de 500 píxeles de ancho, para ver la diferencia entre los dos divs!
Aquí es un ejemplo de los dos divs anteriores:
Ejemplo
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
} Inténtalo tú mismo "