Para lograr que siempre el bloque de nuestro diseño web permanezca centrado independientemente al tamaño de la resolucion del monitor de los usuarios aplicaremos las siguientes propiedades css.
Código CSS: Creamos un selector de ID llamado "#contenedor" en la hoja de estilo, y le aplicamos la propiedad margin con dos valores el primero señala los margenes superior e enferior con valor "0" y el segundo indica los margenes tanto izquierdo como derecho con valor "auto" para que siempre permanezca al centro
#contenedor{margin:0 auto;
width:700px;
border:1px solid #111;
}
Código HTML:
Ahora agregamos el atributo (id="contenedor") al bloque que permanecera siempre centrado.
<body> <div id="contenedor"> Parrafo ... </div> </body>Ver Ejemplo centrado de bloque con css
Con las propiedades css anteriores es suficiente para ver el bloque centrado en la mayoria de los browsers, exploradores actuales. Pero algunas versiones antiguas de exploradores problematicos como el IE 4.0, si es que todavia alguien lo utiliza, no ejecutan correctamente la propiedad margin con valor auto.
Para lograr que tambien el bloque este centrado en versiones antiguas como el IE 4.0, añadiremos lo siguiente.
Código CSS:Añadimos en body (text-align:center;) para centrar el bloque, en realidad esta propiedad solo sirve para centrar texto. Pero IE 4 tambien lo utiliza para centrar bloques.
como aplicamos a body (text-align:center;) todo los parrafos, titulos se centraran, lo q no es bueno, entonces corregimos con la propiedad (text-align:left;) aplicando a todo el contenido del bloque.
body{text-align:center;}
#contenedor{margin:0 auto;
width:700px;
border:1px solid #111;
text-align:left;
}
Código HTML:
En el HTML no hay modificación.
<body> <div id="contenedor"> Parrafo ... </div> </body>Ver Ejemplo 2 centrado de bloque con css
Maquetación con CSS, HTML flotar bloques, layout o cajas. Diseño web estandar, colores CSS, ancho, alto.
Ver más »Códigos CSS para imágenes, casos prácticos, ejemplos.
Ver más »Volumen de letras, fuentes, tipografía, interlineado, tamaño de texto, subrayado, efectos de texto:
Ver más »Aprenderemos a estructurar y diseñar todo tipo de menus con CSS mediante ejemplos y casos prácticos.