informaticaPC

Tutorial de CSS

Centrar un div dentro de otro

Regístrate

Los datos recopilados tienen como finalidad el envío de novedades sobre contenidos formativos propios (tanto en modalidad gratuita como de pago) y de terceros en calidad de afiliado, así como también noticias, información y otros contenidos relacionados con la informática y las nuevas tecnologías, siendo responsable de dicha información Francisco Javier Medina Medina (propietario de InformaticaPC.com).
Al obtener tu consentimiento los datos serán almacenados en el proveedor de E-Mail marketing MailRelay.
Por supuesto, en cualquier momento podrás hacer uso de tus derechos para acceder, rectificar, limitar y suprimir dichos datos.

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