Contenido

Curioso truco CSS

16 Mar

+ 0

Curioso efecto en CSS para centrar elementos haciendolo sensible al redimensionado de la ventana del navegador. Además este testeado y funcionando en la mayoría de los navegadores (Firefox, IE6, Opera 7, NN7, y Mozilla 1.2)

El código que lo consigue es extremadamente sencillo 😀

CSS 

body {
    font-size: 12px;
    font-family: arial, helvetica, sans-serif;
    color: #333;
}
p {
    margin: 1em;
}
.comments {
    background-color: #e3e3e3;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    padding: 2px;
}

#mydiv {
    position:absolute;
    top: 50%;
    left: 50%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/
    border: 1px solid #ccc;
    background-color: #f3f3f3;
}

HTML

<body>
<div id="mydiv">
	<p>INTERIOR DEL DIV</p>
</div>
</body>

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.