¿Como centrar una imagen con css?

[kahlito]

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

[JavierB]

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,

[kahlito]

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

[SaleS2]

¿Será que es porque no especificas una unidad en tu stylesheet?

width: 90;
por
width 90px;

[kahlito]

Hola SaleS2, tambien lo probé así y no me salia.

Un saludo

[kahlito]

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

[caricatos]

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

[kahlito]

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

[caricatos]

:

Estupendo... ...

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

Saludos

[kahlito]

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

[caricatos]

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

[kahlito]

Pues si, la verdad es que puede funcionar de mentirikilla o como truco

Gracias de nuevo torremolinero , un saludo desde La Linea