Centrar imagenes en CSS
Uno de los problemas que he encontrado a la hora de diseñar con CSS, es centrar las imágenes. Así es, tan simple como eso, lo que se solucionaba con un simple <center></center> en HTML, usando css no parece tan sencillo. Soluciones?
Pues existen dos soluciones posibles (a lo mejor hay más pero son las únicas que he probado)
Uno
Asignamos a la etiqueta img la propiedad de «elemento de bloque» y al «margin» el valor «auto», de esta manera el navegador asignará margenes proporcionales al espacio donde está contenida la imagen.
img { display: block; margin: auto; }
Lamentablemente esta solución no es viable en Internet Explorer (para variar), lo cual nos fuerza a buscar otra manera de hacerlo.
Dos
Esta es la manera como vengo haciéndolo, no es la más elegante pero funciona, para eso le daremos la propiedad text:align-center al cuadro contenedor de nuestra imagen, por ejemplo:
<div style="text-align:center"><img src="http://direccion/de/la/imagen.jpg"/></div>
Con lo cual habremos centrado la imagen.
A pesar de haber logrado el objetivo, no se porqué me queda un saborcito amargo en la boca… ¿CSS no sabe centrar imágenes?
ser humano
Music & Design & Photo & Bike.
Test, fail, learn, repeat.
hola
el problema es centrar dos o mas imagenes horizontalmente en iexplorer los demas navegadores lo permiten ejem:
imagen1,imagen2,imagen3,
li {text-align:center}
resultado explorer
imagen1
imagen2
imagen3
en los demas navegadores correcto
imagen1,imagen2,imagen3
Me ha funcionado perfecto con la opción dos. Creo que es muy elegante.
Gracias.
centrar o alinear: pues yo utilizo esto…..
en ASP
en CSS
#portfolio
{
display: block;
float:right;
padding:0 300px 0 0;
[…] no lo creía, css tenia que tener alguna manera para solucionar esto. Hasta que llegué a Centrar imagenes en CSS – iDioteca donde uno de los comentarios propone colocar las imágenes entre etiquetas <p></p> y […]
Hola en el post anterior puse el html, pero no ha salido.
Imagino que hay limite de texto…
http://www.inetrnavegacion.com
Hola, he coincidido con vuestro tema en esta web y me he preguntado a pesar de la dificultad de las imagenes en las hojas CSS, podrría centrar y en un momento pude ennumerar algunas, claro está que la mayoría envolviendo en una capa «Div».
Ejemplos;
img{ display:block;margin:auto; }
#uno{text-align:center}
#dos{background-position:center}
#tres{position:relative; margin:auto}
#cuatro{margin:0 auto 0 auto}
#cinco{ padding:0 auto 0 auto}
Si quereis comprobarlo, solo abre un archivo bloc de notas de windows, copias este codigo, cierras y renombras el archivo bloc de notas como .html.
Lo miras y si te sirve, mejor que mejor.
manu
Escuchad a Arias, tenéis muuuucho que aprender ;)
El display: block; con el margin: auto; si que funciona en IE a partir de la versión 6 del mismo, pero solo cuando especificas que estás aplicando los estandares, es decir, cuando le estas especificando un doctype. Si no especificas doctype o este no es la primera linea IE6 se pasa a comportar como IE5.5 y empieza a hacer y calcular mal muchas cosas.
Supuestamente HTML es estructura y CSS presentación, con lo que es normal que no exista una etiqueta para centrar…
interesting
no discutir diminutos internautas que nadie sabe donde están… pequeños seres bondadosos… que estan viviendo con nosotrooooosssssssssssss.
PERO SEGURO QUE NO LOS VERAS!!!!!!!!!!!!!!!!
Un poquito de ayuda porfavor!!!!!!!
GRaaaaaaaaaciassssssssssss!!! hace más de un año que tenía la imagen de cabecera de mi blog, apoyada a la izquierda!
Mil gracias!
Todavía me queda un prblema que no he podido solucionar con una imagen que tengo en la barra lateral, pero esa no es tan grave.
Mil Gracias!
espero y el comentario anterior sea un sarcasmo :-P
pero que os pasa?
Para centrar una imagen en css solo tenemos que sujetar bien la imagen y mover el monitor.
hola a todos
mi solucion sin incomodar a nadie seria poner una leyenda en las paginas
que diga que esa pagina no se ve bien en determinados navegadores
esto es solo para que los mismos desarrolladores de los navegadores se acostumbren a seguir mejor el estandar de css pues en varios casos es el mismo problema con el explorer
no engo nada en contra de este navegador ni e su compañia y mucho menos en contr de este foro pero de alguna forma nosors tambien tenemos algo de culpa por no dar a conocer el problema a los desarrolladores de los navegadores
mi solucion seria crear un div y poner la imagen como fondo en este div o usar tablas
Bueno, como verás en el post, esas soluciones (todas las expresadas en los comentarios) ya fueron explicadas, es decir el problema no es centrar, el problema es ke no hay una etiketa que permita hacerlo sin tener ke hacer un «div» (lo optimo (según yo) es ke así como hay un «float:left» hubiera un «float:center»).
No me tomen a mal pero lo ke resumo de esto es ke hay gente ke se apasiona tanto con una idea ke ni sikiera se toma la molestia de leer bien el post antes de lanzar una «solución».
Hola!
CSS si sabe centrar, pero tu no xD
La idea, y el estandar CSS2, es que un elemento en linea, inline, interior o contenido, no se «centra», o al centro, si no que un elemento bloque, block, exterior o contenedor, alinea su contenido… Así que:
Colocas tu «img» dentro de un elemento «p», y al «p» le das estilo «text-align: center;»
Ahora para el caso de alinear toda la página, al «body» le das «text-align: center;» y a los elementos que estan contenidos en el «body» («p», «div»s, whatever) les das estilo: «margin: 0px auto;»
y voila!
Mira allí:
http://www.bluerobot.com/web/css/center1.html
Parece ser que en CSS3 habrá un atributo para centrar elementos bloques y no se tendrá que emplear el atributo un tanto «raro» «text-align» para centrar elementos que no son solo texto.
Bueno,
No tomes a mal todo esto.
Saludos
Nice blog
img { hrtl-align: center nule block;
}
Hola,
si combinamos ambos códigos funciona en las ultimas versiones de ambos navegadores (lo de probar la compatibilidad con versiones anteriores lo dejo para otro)
img.fotocen {
text-align: center;
display: block;
margin: auto;
margin-bottom: 10px;
}
atolondrado, da.
(Del part. de atolondrar).
1. adj. Que procede sin reflexión
La solucion que implemente para centrar fue algo asi:
img {
margin: 10px,0,0,10px;
text-align: center;
display: block;
}
tu solucion que realizas con los divs es correcta, pero tenias razon ya que el codigo que puse solo funciona en Firefox y Opera.
espero que el 2do codigo que te muestro te funke
Así es, se necesita una propiedad ke funcione como el casi desechado <center></center>
Hasta ahora lo único que he hecho es usar aunque ya es anacrónico pero funciona… lo que recomiendas está bueno, pero sí, falta algo para poder centrar las cosas como debe ser.
si te das cuenta, mi atolondrado Geraldo, ese código ke has puesto es exactamente el mismo ke puse en mi artículo, código ke no funciona en Internet explorer… :razz:
Bueno mi estimado Almadark, Css si sabe centrar.
El codigo que yo uso es el siguiente
img {
margin-left: auto;
margin-right:auto;
display: block;
}