Centrar horizontalmente un objeto en pantalla, es una tarea sencilla. Pero, ¿y centrarlo verticalmente?. Mucha gente me había hecho esta pregunta y hoy he encontrado la solución en Unijimpe.
La idea es usar el posicionamiento absoluto y asignar como valores al margen izquierdo y superior, un valor negativo que será la mitad del tamaño del objeto que queramos centrar. Por ejemplo; si queremos centrar una imagen con un tamaño de 350×400, tendríamos que hacer lo siguiente:
1.- Creamos un estilo con los siguientes parámetros.
#center_object {
width: 350px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px; /* la mitad de alto que nuestro objeto */
margin-left: -175px; /* la mitad de alto que nuestro objeto */
}
2.- Finalmente, incluimos nuestro objeto dentro una etiqueta <DIV>:
<html>
<head>
<title>Mi objeto centrado</title>
<style type=“text/css”>
#center_object {
width: 350px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px; /* la mitad de alto que nuestro objeto */
margin-left: -175px; /* la mitad de alto que nuestro objeto */
}
</style>
</head>
<body>
<div id=“center_object”>
<img scr=“southdunker.gif” width=“350″ height=“400″>
</div>
</body>
</html>
Este es el ejemplo del resultado.
::–Dunker–::
Comentarios recientes