Foros del Web » Creando para Internet » CSS »

¿Como centrar una imagen con css?

Estas en el tema de ¿Como centrar una imagen con css? en el foro de CSS en Foros del Web. Buenas estoy intentando centrar una imagen dentro de un div con este codigo: #primerboton{ position:absolute; width:90; height:18; z-index:2; top: 40;background: #336699; margin-right:auto; margin-left:auto; text-align:center;display: block; ...
  #1 (permalink)  
Antiguo 25/01/2004, 09:54
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
¿Como centrar una imagen con css?

Buenas estoy intentando centrar una imagen dentro de un div con este codigo:

#primerboton{
position:absolute; width:90; height:18; z-index:2; top: 40;background: #336699; margin-right:auto; margin-left:auto; text-align:center;display: block;
}


Y luego en el body lo llamo así:

<div id="primerboton">
<img src="botonalfa147.gif">
</div>

Y no se porqué pero en Iexplorer no me sale centrao y en Mozilla y los demás si , incluso he probando mirando el post que puso tunait donde pedia centrar una tabla con css y nada, ya que he visto lo de los margin-right y left:auto o incluso probando con el display:block

Enlace

¿Cual es el problema?

Un saludo
  #2 (permalink)  
Antiguo 25/01/2004, 10:47
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Hola, kahlito.

Creo que es porque margin-left:auto, margin-right:auto y display:block tienes que ponerselo a la imágen, no al div donde la has puesto.

Mirate la respuesta que me dio terminux cuando pregunté eso mismo -> Pulsame

Suerte. Saludos,
  #3 (permalink)  
Antiguo 25/01/2004, 11:06
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola Javier B, precisamente de ese post que te puso terminux fue donde cogí esos atributos margin-left:auto, margin-right:auto y display:block , solo que según tengo entendido el atributo style de html (gracias a tunait) y de ahí que lo este intentando hacer desde un id o class, y ahora que me fijo es cierto que se lo tengo que poner a la imagen en vez de al div, aunque no lo habia probado nunca.

Acabo de intentarlo así y me sale por lo que parece :

<style>
.imagen{margin-right:auto; margin-left:auto; text-align:center;display: block;}
</sytle>


<div id="primerboton">
<p class="imagen"><img src="botonalfa147.gif"></p>
</div>

¿Es correcto así o hay alguna manera más facil?

Muchas gracias por tu ayuda un saludo
  #4 (permalink)  
Antiguo 25/01/2004, 11:06
 
Fecha de Ingreso: enero-2004
Mensajes: 35
Antigüedad: 13 años, 10 meses
Puntos: 0
¿Será que es porque no especificas una unidad en tu stylesheet?

width: 90;
por
width 90px;
  #5 (permalink)  
Antiguo 25/01/2004, 11:12
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Hola SaleS2, tambien lo probé así y no me salia.

Un saludo
  #6 (permalink)  
Antiguo 26/01/2004, 02:13
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Vaya acabo de mirar en Mozilla y el ejemplo anterior que puse no me sirve:

Este estilo fue para crear la capa:

<style>
}
#primerboton{
position:absolute; width:90; height:18; z-index:2; top: 40;background: #336699;}
</style>

Y este para crear la posición centrada de la imagen:

<style>
.imagen{margin-right:auto; margin-left:auto; text-align:center;display: block;}
</sytle>


<div id="primerboton">
<p class="imagen"><img src="botonalfa147.gif"></p>
</div>


Y viendo que al final no me salia en otros navegadores he optado por poner las imagenes sin estar dentro de esas capas:

<style>
.posicionimagen {position:absolute; width:280; height:160;top: 182; left: 450;}
.primerob{position:absolute; width:90; height:18; top: 40;}
.segundob{position:absolute; width:90; height:18; top: 100;}
.tercerb{position:absolute; width:90; height:18; top: 160;}
.cuartob{position:absolute; width:90; height:18; top: 220;}
.quintob{position:absolute; width:90; height:18; top: 280;}
</style>

Y en el body:

<p class="posicionimagen"><img src="alfa1473projete.gif"></p>
<p class="quintob"><img src="botonspider.gif"></p>
<p class="cuartob"><img src="botongtv.gif"></p>
<p class="tercerb"><img src="botonalfa166.gif"></p>
<p class="segundob"><img src="botonalfa156.gif"></p>
<p class="primerob"><img src="botonalfa147.gif"></p>

Así me las coloca en la parte que quiera y me funciona, pero y si las quisiese hacer como lo intentaba antes, o sea centrada en un div, ¿Como podria hacerlo?

Gracias, un saludo
  #7 (permalink)  
Antiguo 26/01/2004, 02:41
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Hola kahlito:

Para hacer pruebas te recomiendo que hagas algo para resaltar la capa como por ejemplo cambiar el color de fondo, así será más fácil descubrir los fallos...

Cuando antes te comentaron sobre el width de la capa, me parece que debía estar 100% o usar el atributo align=center

Verás, según w3.org la etiqueta center se puede reemplazar con <div align="center"> (si no me equivoco)
Si no pones eso en la capa se alinea a izquierda.

Para los estilos de las imágenes, has probado poner sencillamente margin: auto; que pondría también a "auto" los márgenes superior e inferior, o también... margin: 0 auto 0 auto;

Espero que te sirva.

Saludos
  #8 (permalink)  
Antiguo 26/01/2004, 03:16
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Buenos dias caricatos , efectivamente como me pones en el ejemplo de cambiar los estilos de las imágenes poniendo margin: auto; o margin: 0 auto 0 auto; me centra correctamente las imagenes en las capas:

Así he llamado la capa

#capa{
position:absolute; width:90; height:18; z-index:2; top: 100;background: #336699;
}

Y así la posición de la imagen en la capa

.imagen{margin: 0 auto 0 auto;}

Y luego en el body

<div id="capa"><p class="imagen">
<img src="botonalfa156.gif"></p>
</div>

Ahor si me sale centrar una imagen dentro de una capa

Lo que no te he entendido bien ha sido lo de cambiar el width de la capa y ponerlo a 100%, lo he cambiado y lo que me hace es coger todo el ancho de pantalla , creo que no hace falta ¿no? si lo que queria era poner un ancho de 90px , y lo del atributo align=center no lo he puesto por que la capa va a la izquierda de la pantalla, no se que me quieres decir o que alomejor antes no me explique bien en el ejemplo anterior

Lo de probar con colores diferentes en el fondo de capas y todo eso es lo que estoy haciendo en el ejemplo para comprobar correctamente donde se situan los elementos que le voy introduciendo, gracias por el consejo

Muchas gracias por tu ayuda caricatos, un saludo

Última edición por kahlito; 26/01/2004 a las 03:17
  #9 (permalink)  
Antiguo 26/01/2004, 04:58
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
:

Estupendo... ...

Lo del 100% es tan solo que no me enteré bien del asunto.

Saludos
  #10 (permalink)  
Antiguo 26/01/2004, 05:09
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Ah ok menos mal, estaba un poco liado , ya conseguí lo que buscaba en este apartado logrando que esa imagen se ajuste dentro de un div, aunque en este caso la capa y la imagen tienen las mismas dimensiones.

He probado imaginando que la capa fuese de por ejemplo 250 de ancho y de alto y no he logrado la manera de centrar una imagen dentro , pero eso mejor lo dejo para otro dia, que si no me voy a poner más pesado que Julito

Un saludo paisano y muchas gracias de nuevo
  #11 (permalink)  
Antiguo 26/01/2004, 06:24
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Hola otra vez:

Por este tema, me puse a revisar un formulario que tengo, y me acordé de un truco que alguna vez he usado...

Se trata de no usar el tag img, sino dentro del div darle los estilos de anchura y altura, y poner la imagen como imagen de fondo del div...

<div style="width: 200; height: 200; background-image: url(tuImagen); background-repeat: no-repeat; background-position center center;" ></div>

Saludos
  #12 (permalink)  
Antiguo 26/01/2004, 06:36
Avatar de kahlito
Colaborador
 
Fecha de Ingreso: marzo-2003
Ubicación: En el Estrecho y el mar
Mensajes: 2.893
Antigüedad: 14 años, 9 meses
Puntos: 60
Pues si, la verdad es que puede funcionar de mentirikilla o como truco

Gracias de nuevo torremolinero , un saludo desde La Linea
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:28.