Centrar un elemento div horizontalmente con CSS y Dreamweaver

Por Bernardo
17 enero, 2012 - 0:50

Categoría : CSS
Etiquetas : , , , ,

Comentarios : 2 Comentarios

Artículos Relacionados


Utilizando la propiedad margin de CSS, es muy sencillo centrar una página web horizontalmente. La solución consiste en agrupar todos los contenidos de la página en un elemento
<div> y asignarle a ese <div>unos márgenes laterales automáticos. Veamos paso a paso como hacer todo estos:

Primero crearemos una página, por ejemplo con Dreamweaver, y la llamaremos:

centrar-div-horizontal.html

Abrimos el fichero creado e insertamos un nuevo div, tendremos el siguiente código fuente


<html>
<head>
<title>Centrar div horizontalmente</title>
</head>
<body>
<div>Colocar aquí el contenido de la nueva etiqueta Div</div>
</body>
</html>

Ahora daremos un ancho de 300px y una altura de 150px al div que hemos creado. Además añadiremos un color de fondo, tendremos el siguiente código de la hoja de estilos. Creamos una nueva clase que llamaremos centar con todo lo comentado anteriormente:


<style type="text/css">
.centrar {
height: 150px;
width: 300px;
margin-right: auto;
margin-left: auto;
background-color: #393;
}
</style>

Cuando se asignan márgenes laterales automáticos a un elemento, los navegadores centran ese elemento respecto de su elemento padre. En este ejemplo, el elemento padre del <div> es la propia página (el elemento <body>), por lo que se consigue centrar el elemento <div> respecto de la ventana del navegador. Por este motivo he puesto los margenes derecho e izquierdo como auto. No es necesario poner valor en los margenes superior e inferior. El poner una altura y un color de fondo es para una mejora visual en el navegador.

Si añadimos el código anterior a nuestra página tendremos como resultado:


<html>
<head>
<title>Centrar div horizontalmente</title>
<style type="text/css">
.centrar {
height: 150px;
width: 300px;
margin-right: auto;
margin-left: auto;
background-color: #393;
}
</style>

</head>
<body>
<div>Colocar aquí el contenido de la nueva etiqueta Div</div>
</body>
</html>

Por último, solamente queda aplicar el estilo creado al div:

<div>Colocar aquí el contenido de la nueva etiqueta Div</div>

Por lo cual, finalmente nuestra página quedará de la siguiente forma:


<html>
<head>
<title>Centrar div horizontalmente</title>
<style type="text/css">
.centrar {
height: 150px;
width: 300px;
margin-right: auto;
margin-left: auto;
background-color: #393;
}
</style>

</head>
<body>
<div>Colocar aquí el contenido de la nueva etiqueta Div</div>
</body>
</html>

Mostramos en el navegador y veremos la siguiente imagen:

En el siguiente video teneis los pasos a seguir:

Deja tu comentario