[SOLUCIONADO] Posicionando una imagen en el centro con CSS

azel42 · #1 (**permalink**) 25/01/2013, 05:20

Hola a todos de nuevo, en primer lugar me defiendo porque seguro que ya han preguntado esto alguna vez... busqué el asunto, pero el buscador me ha sido inútil... U_U

Mi duda es la siguiente:Tengo una pequeña splashscreen, un fondo y encima una imagen, lo único que quiero es que esta imagen quede en el CENTRO de la splashscreen, asi que tengo que posicionarla. Desde HTML 4.1 he leido que align prohibido y que toca utilizar posicionamiento CSS. Hice mis búsquedas y me hablan de flotarla (float) o de utilizar posicionamiento (absoluto, relativo etc) Mi problema es por un lado que no hay "float:center;" y el segundo que los posicionamientos son siempre con cantidades en pixeles y que cuando intento utilizar porcentajes (quiero que la pantalla sea independiente de las resoluciones y demás) se me vuelve completamente loca la posicion.

Sé que esto debe ser un fallo garrafal mio de principiante, por eso pido ayuda!

Para tratar de centrar la imagen utilice el posicionamiento relativo, y despues indiqué quelo quería al 50% en cada posición (top, left, right, bottom) para que quedase centrada, pero se me iba... a la esquina inferior derecha. ¿Alguien me echa un cable?

pzin · #2 (**permalink**) 25/01/2013, 05:27

Cuando indicas posiciones relativas estás indicando cuánto se mueven de su espacio en el flujo del HTML. Si indicas 50%, se moverá un 50%.

Para centrar algo, sólo tiene que ser un elemento de bloque y aplicar márgenes laterales automáticos.

Código CSS:

Ver originalimg {
  display: block;
  margin: 0 auto;
}

azel42 · #3 (**permalink**) 25/01/2013, 05:33

Cita:

Iniciado por Bonez

Cuando indicas posiciones relativas estás indicando cuánto se mueven de su espacio en el flujo del HTML. Si indicas 50%, se moverá un 50%.

Para centrar algo, sólo tiene que ser un elemento de bloque y aplicar márgenes laterales automáticos.

Código CSS:

Ver originalimg {
  display: block;
  margin: 0 auto;
}

No queda centrado, se alinea a la izquierda

pzin · #4 (**permalink**) 25/01/2013, 05:34

Entonces es un caso especial.

¿Tienes una URL donde poder verlo? O el código en si.

azel42 · #5 (**permalink**) 25/01/2013, 05:37

Cita:

Iniciado por Bonez

Entonces es un caso especial.

¿Tienes una URL donde poder verlo? O el código en si.

Te lo pego aqui porque lo estoy trabajando en local primero :)

Código:

<html>
<head><title>WEB</title>
<style>
	p.normal{font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
			color:"#000000";
			text-align:left;
			text-indent:15px;}
</style>
</head>
	<body style="background-image:url('bg.png');">
	<p class="normal">Futura splashscreen de la web
	<img src="mainimg.png" style="display:block; margin:0;">
	<a href="/site">Entrar al sitio</a></p>
	</body>
</html>

pzin · #6 (**permalink**) 25/01/2013, 05:43

Uhm...

Te faltó el auto que te puse en #2.

azel42 · #7 (**permalink**) 25/01/2013, 05:46

Cita:

Iniciado por Bonez

Uhm...

Te faltó el auto que te puse en [URL="http://www.forosdelweb.com/f53/posicionando-imagen-centro-con-css-1033879/#post4355378"]#2[/URL].

Añadiendole el auto tampoco funcionaba, lo quite por si era redundante o para ver si habia algun cambio, y no lo hay :O

pzin · #8 (**permalink**) 25/01/2013, 05:51

Funcionar funciona. Igual tienes alguna otra cosa especificada en el CSS o alguna otra cosa. Pero tendría que funcionar.

A ver si estás aplicando algún otro estilo al elemento.

azel42 · #9 (**permalink**) 25/01/2013, 05:52

Cita:

Iniciado por Bonez

Funcionar funciona. Igual tienes alguna otra cosa especificada en el CSS o alguna otra cosa. Pero tendría que [URL="http://jsbin.com/imalon/1/edit"]funcionar[/URL].

A ver si estás aplicando algún otro estilo al elemento.

Te garantizo que ese es el codigo literal de la splashscreen, mas no le puedo pedir. Lo he probado en IE 9 y en FF y en ninguno se pone en el centro, ¿has probado justo ese codigo? Ojalá funcionase, nadie lo quiere mas que yo! :P

pzin · #10 (**permalink**) 25/01/2013, 06:00

Si he probado justo ese código. Lo tienes en el enlace a jsbin. Funciona en Chrome/FF/Safari... Pero no es algo que suela dar problemas en los navegadores.

Sube la página y se puede mirar a ver qué es lo que falla. Un DOCTYPE no está tampoco nunca de mas.

azel42 · #11 (**permalink**) 25/01/2013, 06:03

Cita:

Iniciado por Bonez

Si he probado justo ese código. Lo tienes en el enlace a jsbin. Funciona en Chrome/FF/Safari... Pero no es algo que suela dar problemas en los navegadores.

Sube la página y se puede mirar a ver qué es lo que falla. Un DOCTYPE no está tampoco nunca de mas.

Umm... nah, veo que funcionar funciona, sera por las dimensiones de la imagen? en realidad eso no tendría que importar, no? Y el doctype, matenme pero nunca me he puesto a especificarlo manualmente, y eso es un suspenso...

Me he quedado ya sin ideas de por qué puede ser

pzin · #12 (**permalink**) 25/01/2013, 06:06

Por poder pueden ser infinidades de cosas. Por eso decía de subirlo a algún sitio online.

Prueba sino, a sacar la imagen del párrafo.

Código HTML:

Ver original<body style="background-image:url('bg.png');">
  <p class="normal">
    Futura splashscreen de la web
   <a href="/site">Entrar al sitio</a>
  </p>
  <img src="mainimg.png" style="display:block; margin:0 auto;">
</body>

Sólo a modo de prueba.

azel42 · #13 (**permalink**) 25/01/2013, 06:09

Cita:

Iniciado por Bonez

Por poder pueden ser infinidades de cosas. Por eso decía de subirlo a algún sitio online.

Prueba sino, a sacar la imagen del párrafo.

Código HTML:

Ver original<body style="background-image:url('bg.png');">
  <p class="normal">
    Futura splashscreen de la web
   <a href="/site">Entrar al sitio</a>
  </p>
  <img src="mainimg.png" style="display:block; margin:0 auto;">
</body>

Sólo a modo de prueba.

Da un poco de miedo el rollo porque copio literalmente el codigo que vemos que funciona en el link que me pasaste y... no funciona

pzin · #14 (**permalink**) 25/01/2013, 06:46

Vuelvo a lo mismo, súbelo a algún sitio.

azel42 · #15 (**permalink**) 25/01/2013, 06:51

Cita:

Iniciado por Bonez

Vuelvo a lo mismo, súbelo a algún sitio.

Modifico el enlace que tu me pasaste con el codigo literal y ahi si funciona, es exactamente el mismo código...

pzin · #16 (**permalink**) 25/01/2013, 07:00

La lógica dice que algo no es igual.

Sin ver nada, más no puedo ayudar, porque ya ves que funcionar funciona. No te digo que no sea raro, pero la explicación está en tu página y no en el código que está en jsbin. Por eso insisto en verlo en vivo.

azel42 · #17 (**permalink**) 25/01/2013, 07:08

Cita:

Iniciado por Bonez

La lógica dice que algo no es igual.

Sin ver nada, más no puedo ayudar, porque ya ves que funcionar funciona. No te digo que no sea raro, pero la explicación está en tu página y no en el código que está en jsbin. Por eso insisto en verlo en vivo.

En local es donde unico me ha dado fallo, lo he subido al server web y funciona genial. ¡Muchisimas gracias! Especialmente por haber tenido la paciencia de aguantarme :D

Ya el misterio de por qué en local es asi, lo dejo para después de comer

Gracias de nuevo!

azel42 · #18 (**permalink**) 25/01/2013, 10:24

Vale, veo el problema, y es que el IE no esta cogiendo bien la propiedad, funciona en FF pero no en IE, ¿problemas de compatibilidad? (Lo puse como solucionado, pero me da cosa abrir un tema nuevo)