Cómo crear un cuadro centrado para imágenes con div

econsorte · 27 Oct 2011

Hola betas, le hago una consulta.

Tengo una web con muchas imágenes superpuestas y la posiciono con el atributo left.
Entonces no la puedo centrar. Salvo que al div contenedor le agregue el atributo left con %, pero al cambiar de monitor me queda mas para la derecha o izq.

Como puedo crear con div, un cuadro centrado de 1200 px y que de ahí las imágenes tomen la distancia del atributo left.

vallel · 27 Oct 2011

Al div que quieres hacer ponle estas propiedades:

HTML:

position: relative;   //Esto debe hacer que los elementos internos se posicionen en relación a este
margin: auto;        //Esto debe centrar el div con respecto al contenedor padre (suponiendo que es el body se centrara en toda la pagina)

Pruebalo y dime si funciona 🙂

Saludos

P.D: Es para resolver el problema de este post http://forobeta.com/html/72493-problema-div.html ? 😛

ziney · 27 Oct 2011

Simplemente has esto:

#contenedor{
display: block;
margin: auto; /*Centra el DIV*/
overflow: hidden;
}

Zetta · 27 Oct 2011

Con eso basta para cualquier navegador

Insertar CODE, HTML o PHP:

.centrar{
display: block;
margin: auto;
}

econsorte · 28 Oct 2011

vallel dijo:
Al div que quieres hacer ponle estas propiedades:

HTML:

position: relative; //Esto debe hacer que los elementos internos se posicionen en relación a este margin: auto; //Esto debe centrar el div con respecto al contenedor padre (suponiendo que es el body se centrara en toda la pagina)

Pruebalo y dime si funciona 🙂

Saludos

P.D: Es para resolver el problema de este post http://forobeta.com/html/72493-problema-div.html ? 😛

Si, estoy ayudando a Marcelo!!!

Pero el creo el index.html desde photoshop y es una web revista, todas imágenes con posición left y top, y el problema es que no se puede centrar cuando cambias de monitor.

La única forma que más o menos me funciona es agregándole al contenedor el left con %. Pero depende de la resolución del monitor se ve centrado o muy para la izq o derecha.

Muchas gracias a todos por su AYUDA.

Copio el código para que vean lo que digo.

Insertar CODE, HTML o PHP:

<style type="text/css">
<!--

#contenedor{
display: block;
margin: auto; /*Centra el DIV*/
overflow: hidden;
}


#forjados-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1200px;
	height:237px;
}

#forjados-02 {
	position:absolute;
	left:0px;
	top:237px;
	width:167px;
	height:1137px;
}

#forjados-03 {
	position:absolute;
	left:167px;
	top:237px;
	width:867px;
	height:300px;
}

#forjados-04 {
	position:absolute;
	left:1034px;
	top:237px;
	width:166px;
	height:987px;
}

#forjados-05 {
	position:absolute;
	left:167px;
	top:537px;
	width:205px;
	height:45px;
}

#forjados-06 {
	position:absolute;
	left:372px;
	top:537px;
	width:165px;
	height:45px;
}

#forjados-07 {
	position:absolute;
	left:537px;
	top:537px;
	width:264px;
	height:45px;
}

#forjados-08 {
	position:absolute;
	left:801px;
	top:537px;
	width:84px;
	height:45px;
}

#forjados-09 {
	position:absolute;
	left:885px;
	top:537px;
	width:149px;
	height:45px;
}

#forjados-10 {
	position:absolute;
	left:167px;
	top:582px;
	width:552px;
	height:295px;
}

#forjados-11 {
	position:absolute;
	left:719px;
	top:582px;
	width:315px;
	height:59px;
}

#forjados-12 {
	position:absolute;
	left:719px;
	top:641px;
	width:315px;
	height:188px;
}

#forjados-13 {
	position:absolute;
	left:719px;
	top:829px;
	width:315px;
	height:48px;
}

#forjados-14 {
	position:absolute;
	left:167px;
	top:877px;
	width:867px;
	height:230px;
}

#forjados-15 {
	position:absolute;
	left:167px;
	top:1107px;
	width:632px;
	height:217px;
}

#forjados-16 {
	position:absolute;
	left:799px;
	top:1107px;
	width:57px;
	height:41px;
}

#forjados-17 {
	position:absolute;
	left:856px;
	top:1107px;
	width:165px;
	height:41px;
}

#forjados-18 {
	position:absolute;
	left:1021px;
	top:1107px;
	width:13px;
	height:267px;
}

#forjados-19 {
	position:absolute;
	left:799px;
	top:1148px;
	width:57px;
	height:19px;
}

#Masterx20conx20Sectores-17 {
	position:absolute;
	left:856px;
	top:1148px;
	width:160px;
	height:19px;
}

#forjados-21 {
	position:absolute;
	left:1016px;
	top:1148px;
	width:5px;
	height:19px;
}

#forjados-22 {
	position:absolute;
	left:799px;
	top:1167px;
	width:57px;
	height:37px;
}

#forjados-23 {
	position:absolute;
	left:856px;
	top:1167px;
	width:165px;
	height:19px;
}

#Masterx20conx20Sectores-21 {
	position:absolute;
	left:856px;
	top:1186px;
	width:160px;
	height:18px;
}

#forjados-25 {
	position:absolute;
	left:1016px;
	top:1186px;
	width:5px;
	height:18px;
}

#forjados-26 {
	position:absolute;
	left:799px;
	top:1204px;
	width:57px;
	height:101px;
}

#forjados-27 {
	position:absolute;
	left:856px;
	top:1204px;
	width:165px;
	height:19px;
}

#forjados-28 {
	position:absolute;
	left:856px;
	top:1223px;
	width:165px;
	height:18px;
}

#forjados-29 {
	position:absolute;
	left:1034px;
	top:1224px;
	width:118px;
	height:150px;
}

#forjados-30 {
	position:absolute;
	left:1152px;
	top:1224px;
	width:48px;
	height:78px;
}

#Masterx20conx20Sectores-28 {
	position:absolute;
	left:856px;
	top:1241px;
	width:160px;
	height:56px;
}

#forjados-32 {
	position:absolute;
	left:1016px;
	top:1241px;
	width:5px;
	height:56px;
}

#forjados-33 {
	position:absolute;
	left:856px;
	top:1297px;
	width:165px;
	height:8px;
}

#forjados-34 {
	position:absolute;
	left:1152px;
	top:1302px;
	width:48px;
	height:72px;
}

#forjados-35 {
	position:absolute;
	left:799px;
	top:1305px;
	width:118px;
	height:69px;
}

#forjados-36 {
	position:absolute;
	left:917px;
	top:1305px;
	width:93px;
	height:34px;
}

#forjados-37 {
	position:absolute;
	left:1010px;
	top:1305px;
	width:11px;
	height:69px;
}

#forjados-38 {
	position:absolute;
	left:167px;
	top:1324px;
	width:272px;
	height:50px;
}

#forjados-39 {
	position:absolute;
	left:439px;
	top:1324px;
	width:185px;
	height:21px;
}

#forjados-40 {
	position:absolute;
	left:624px;
	top:1324px;
	width:10px;
	height:21px;
}

#forjados-41 {
	position:absolute;
	left:634px;
	top:1324px;
	width:116px;
	height:21px;
}

#forjados-42 {
	position:absolute;
	left:750px;
	top:1324px;
	width:34px;
	height:21px;
}

#forjados-43 {
	position:absolute;
	left:784px;
	top:1324px;
	width:15px;
	height:50px;
}

#forjados-44 {
	position:absolute;
	left:917px;
	top:1339px;
	width:93px;
	height:35px;
}

#forjados-45 {
	position:absolute;
	left:439px;
	top:1345px;
	width:345px;
	height:29px;
}


-->
</style>

vallel · 28 Oct 2011

econsorte dijo:

Si, estoy ayudando a Marcelo!!!

Pero el creo el index.html desde photoshop y es una web revista, todas imágenes con posición left y top, y el problema es que no se puede centrar cuando cambias de monitor.

La única forma que más o menos me funciona es agregándole al contenedor el left con %. Pero depende de la resolución del monitor se ve centrado o muy para la izq o derecha.

Muchas gracias a todos por su AYUDA.

Copio el código para que vean lo que digo.

Insertar CODE, HTML o PHP:

<style type="text/css">
<!--

#contenedor{
display: block;
margin: auto; /*Centra el DIV*/
overflow: hidden;
}


#forjados-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1200px;
	height:237px;
}

#forjados-02 {
	position:absolute;
	left:0px;
	top:237px;
	width:167px;
	height:1137px;
}

#forjados-03 {
	position:absolute;
	left:167px;
	top:237px;
	width:867px;
	height:300px;
}

#forjados-04 {
	position:absolute;
	left:1034px;
	top:237px;
	width:166px;
	height:987px;
}

#forjados-05 {
	position:absolute;
	left:167px;
	top:537px;
	width:205px;
	height:45px;
}

#forjados-06 {
	position:absolute;
	left:372px;
	top:537px;
	width:165px;
	height:45px;
}

#forjados-07 {
	position:absolute;
	left:537px;
	top:537px;
	width:264px;
	height:45px;
}

#forjados-08 {
	position:absolute;
	left:801px;
	top:537px;
	width:84px;
	height:45px;
}

#forjados-09 {
	position:absolute;
	left:885px;
	top:537px;
	width:149px;
	height:45px;
}

#forjados-10 {
	position:absolute;
	left:167px;
	top:582px;
	width:552px;
	height:295px;
}

#forjados-11 {
	position:absolute;
	left:719px;
	top:582px;
	width:315px;
	height:59px;
}

#forjados-12 {
	position:absolute;
	left:719px;
	top:641px;
	width:315px;
	height:188px;
}

#forjados-13 {
	position:absolute;
	left:719px;
	top:829px;
	width:315px;
	height:48px;
}

#forjados-14 {
	position:absolute;
	left:167px;
	top:877px;
	width:867px;
	height:230px;
}

#forjados-15 {
	position:absolute;
	left:167px;
	top:1107px;
	width:632px;
	height:217px;
}

#forjados-16 {
	position:absolute;
	left:799px;
	top:1107px;
	width:57px;
	height:41px;
}

#forjados-17 {
	position:absolute;
	left:856px;
	top:1107px;
	width:165px;
	height:41px;
}

#forjados-18 {
	position:absolute;
	left:1021px;
	top:1107px;
	width:13px;
	height:267px;
}

#forjados-19 {
	position:absolute;
	left:799px;
	top:1148px;
	width:57px;
	height:19px;
}

#Masterx20conx20Sectores-17 {
	position:absolute;
	left:856px;
	top:1148px;
	width:160px;
	height:19px;
}

#forjados-21 {
	position:absolute;
	left:1016px;
	top:1148px;
	width:5px;
	height:19px;
}

#forjados-22 {
	position:absolute;
	left:799px;
	top:1167px;
	width:57px;
	height:37px;
}

#forjados-23 {
	position:absolute;
	left:856px;
	top:1167px;
	width:165px;
	height:19px;
}

#Masterx20conx20Sectores-21 {
	position:absolute;
	left:856px;
	top:1186px;
	width:160px;
	height:18px;
}

#forjados-25 {
	position:absolute;
	left:1016px;
	top:1186px;
	width:5px;
	height:18px;
}

#forjados-26 {
	position:absolute;
	left:799px;
	top:1204px;
	width:57px;
	height:101px;
}

#forjados-27 {
	position:absolute;
	left:856px;
	top:1204px;
	width:165px;
	height:19px;
}

#forjados-28 {
	position:absolute;
	left:856px;
	top:1223px;
	width:165px;
	height:18px;
}

#forjados-29 {
	position:absolute;
	left:1034px;
	top:1224px;
	width:118px;
	height:150px;
}

#forjados-30 {
	position:absolute;
	left:1152px;
	top:1224px;
	width:48px;
	height:78px;
}

#Masterx20conx20Sectores-28 {
	position:absolute;
	left:856px;
	top:1241px;
	width:160px;
	height:56px;
}

#forjados-32 {
	position:absolute;
	left:1016px;
	top:1241px;
	width:5px;
	height:56px;
}

#forjados-33 {
	position:absolute;
	left:856px;
	top:1297px;
	width:165px;
	height:8px;
}

#forjados-34 {
	position:absolute;
	left:1152px;
	top:1302px;
	width:48px;
	height:72px;
}

#forjados-35 {
	position:absolute;
	left:799px;
	top:1305px;
	width:118px;
	height:69px;
}

#forjados-36 {
	position:absolute;
	left:917px;
	top:1305px;
	width:93px;
	height:34px;
}

#forjados-37 {
	position:absolute;
	left:1010px;
	top:1305px;
	width:11px;
	height:69px;
}

#forjados-38 {
	position:absolute;
	left:167px;
	top:1324px;
	width:272px;
	height:50px;
}

#forjados-39 {
	position:absolute;
	left:439px;
	top:1324px;
	width:185px;
	height:21px;
}

#forjados-40 {
	position:absolute;
	left:624px;
	top:1324px;
	width:10px;
	height:21px;
}

#forjados-41 {
	position:absolute;
	left:634px;
	top:1324px;
	width:116px;
	height:21px;
}

#forjados-42 {
	position:absolute;
	left:750px;
	top:1324px;
	width:34px;
	height:21px;
}

#forjados-43 {
	position:absolute;
	left:784px;
	top:1324px;
	width:15px;
	height:50px;
}

#forjados-44 {
	position:absolute;
	left:917px;
	top:1339px;
	width:93px;
	height:35px;
}

#forjados-45 {
	position:absolute;
	left:439px;
	top:1345px;
	width:345px;
	height:29px;
}


-->
</style>

Mira, haz esto, envuelve todo el contenido en un div como este:

HTML:

<div style="position:relative; margin:auto; width: 1200px;">

Debe funcionar, ya lo probe en la url que publicó marcelo.

Saludos =)

econsorte · 28 Oct 2011

vallel dijo:
Mira, haz esto, envuelve todo el contenido en un div como este:

HTML:

<div style="position:relative; margin:auto; width: 1200px;">

Debe funcionar, ya lo probe en la url que publicó marcelo.

Saludos =)

FUNKA!!!! Genio!!!

muchas gracias a todos!!!

vallel · 28 Oct 2011

jeje solo faltaba poner el ancho al código que te había pasado anteriormente 😛

saludos

Andres · 29 Oct 2011

Insertar CODE, HTML o PHP:

contenedor{
width:900px;
margin: 0 auto;
}

MarioMX · 1 Nov 2011

El problema con el centrado de un div y casi cualquier tag html, radica en el hecho de aplicar posiciones absolutas o relativas, estas funcionan conforme a los ejes x-y de nuestro navegador. Si consideramos que nuestra web se desplegará en diversas resoluciones y navegadores no resulta la mejor alternativa para el caso. Como anota @Andrés Luna, la solución:

Insertar CODE, HTML o PHP:

.contenedor {width:900px; margin:0 auto;}

Centrará de forma adecuada el div dentro de ff, chrome e inclusive ie9. Sin embargo esta propiedad no la interpretará ie7 e ie8 (el eterno asunto de los estándares con Microsoft), por lo que hay que emplear hacks... que no es lo mejor, ni lo indicado pero debemos recurrir a esta práctica para lograr el resultado. Para ello aplicas lo siguiente:

Insertar CODE, HTML o PHP:

.contenedor {width:900px; margin:0 auto; /*lo interpretan FF, Chrome, IE9, Safari*/ .margin:0 10%; /*aquí el hack para IE7-IE8*/}

Como podrás notar, para el caso de IE7-8, el margen lateral lo aplicamos con porcentaje... esto porque el "auto" no lo reconoce... Para finalizar y obtener el área interior que requieres, solo aumenta el siguiente atributo:

Insertar CODE, HTML o PHP:

.contenedor {width:900px; margin:0 auto; /*lo interpretan FF, Chrome, IE9, Safari*/ .margin:0 10%; /*aquí el hack para IE7-IE8*/ padding:20px;}

Espero sea de utilidad, saludos.

Borjasol · 1 Nov 2011

Otra opción más cutre pero efectiva (incluso en exploradores antiguos) es darle un left del 50% (colocándose así la imagen a partir del centro) y añadiéndole un margin-left negativo de la mitad del width del div que quieres poner en el medio (por ejemplo si el width es de 300 tendrías que darle al margin-left -150).

Con ese truco te aseguras que siempre permanezca centrado. Saludos!

vallel · 1 Nov 2011

La verdad no se por que ya van varios que dicen que en IE no funciona margin:auto; para centrar, a mi personalmente nunca me ha dado problemas.

Por otro lado, el problema de este post iba más alla de solo centrar un div. El problema es que el diseño se maqueto con photoshop y contenia puros divs posicionados de manera absoluta con sus respectivos valors top y left. Aquí lo que buscaban era no tener que rehacer el maquetado (que fue la primer sugerencia que se les planteo) y les propuse envolver todo en un contenedor que si estuviera centrado y tuviera una posicion relativa, así todos los divs internos se posicionan en relación a este contenedor padre (que ya esta centrado).

La solución que propuse fue:

HTML:

<div id="contenedor">
<!-- Aquí todo el contenido y divs posicionados de manera absoluta -->
</div>

Y este el estilo para el contenedor:

Insertar CODE, HTML o PHP:

#contenedor { position:relative; margin:auto; width:1200px; }

Esto les funciono, no comentaron haber tenido problemas con IE, pero me parece interesante que ya he leido comentarios de que da problemas el margin:auto, siendo que como comento yo nunca he tenido problemas, mucho menos con las versiónes más nuevas (IE8 e IE9).

Saludos

Borjasol · 1 Nov 2011

IE6 es creo que el que da fallo, según lo que me informé, y en el IE7 lo solucionaron con el margin:auto.

Con

Insertar CODE, HTML o PHP:

left:50%;
margin-left:- [longitud del div] /2 px;

tiene que funcionar correctamente en todos los exploradores.

Cómo crear un cuadro centrado para imágenes con div

econsorte

vallel

ziney

Zetta

econsorte

vallel

econsorte

vallel

Andres

MarioMX

Borjasol

vallel

Borjasol

Temas similares