En el post anterior les mostraba como alinear un div verticalmente hacia abajo. Ok pero ¿para centrarlo horizontalmente? Bueno también es sencillo. Debemos de fijar las siguientes propiedades CSS: Al div contenedor del div que deseamos centrar la propiedad TEXT-ALIGN la ponemos en CENTER, al div que deseamos centrar fijamos la propiedad MARGIN al valor 0 AUTO. Con esto queda nuestro div centrado, pero su contenido también (y lo más probable es que no deseemos esto), si este es tu caso al div centrado también debes de agregarle la propiedad TEXT-ALIGN a LEFT o RIGHT (como desees).
Pues eso es todo. Aquí también te dejo un ejemplo para que lo pruebes por ti mismo:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.content
{
width:600px;
height:600px;
background-color:#FFC;
/*---*/
text-align:center;
}
.info
{
width:300px;
height:300px;
background-color:#CCF;
/*---*/
margin:0 auto;
text-align:left;
}
</style>
</head>
<body>
<div class="content">
<div class="info">texto centrado</div>
</div>
</body>
</html>
No hay comentarios:
Publicar un comentario