informaticaPC

Tutorial de CSS

Centrar un div dentro de otro


Regístrate

Tus datos no serán compartidos, solo nosotros te enviaremos información y novedades

Centrar un div dentro de otro

Para centrar un <div> que se encuentra dentro de otro, deberemos definirlo con margin:0px auto (en el div hijo).

Sin embargo, para que funcione también en el navegador web Internet Explorer, deberemos definir text-align:center en el div padre.

Código HTML:

<html>
    <head>
        <title>Cursos gratis</title>
        <link rel="stylesheet" type="text/css" href="estilos.css" />
    </head>

    <body>
        <div id="divPadre">
            <div id="divHijo">Este div está dentro del otro</div>
        </div>
    </body>
</html>

Código CSS:

#divPadre {
    height:100px;
    width:800px;
    text-align:center;
    background-color:blue;
}

#divHijo {
    height:50px;
    width:400px;
    margin:0px auto;
    background-color:red;
}

Descargar ejemplo

Aquí puedes ver el resultado:

Centrar un div

Primera página Anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso