Centrar imagen que no se conoce el ancho en un div

[taote]

A ver, lo que necesito es centrar una imagen rectangular horizontal, dentro de un marco.

El marco es cuadrado, y la parte que sobresale de la imagen las escondo porque activo la propiedad overflow:hidden del marco.

Para el tamaño de la imagen, lo controlo, poniendole un tamaño máximo mediante css, y a partir de ahi que calcule el ancho.

El problema lo tengo cuando quiero centrar la imagen dentro del marco, al principio habia puesto a la imagen margin-left: -25%; y funciona si tiene un ancho suficiente, pero si la proporción de la imagen no lo permite, en vez de centrarla, lo que hace es dejar una marco vacio al lado derecho.

He buscado soluciones para centrar, pero necesito conocer el ancho de la imagen, y ese es desconocido, solo se la altura. Repito que serian imagenes rectangulares donde el ancho es mayor que la altura. Y haciendo un text-align:center para el marco no me funciona.

Alguna idea. Gracias.

[webxedo]

Holas taote

Puedes usar el margin : 0 auto; aunque mejor lo pondrías la imagen en el CSS y de ahy si lo podrías centrar.

Utilizando esto:

background : url('direccion image') no-repeat top center;

Saludos.

[feral]

Es obligatorio indicar un width concreto para centrar con margin {0 auto}, o al menos eso creo recordar. Ese width no tiene porque ser un numero fijo en pixels, puede ser un porcentaje %, em etc...

[taote]

Si, para utilizar el auto, es necesario indicar el ancho. El problema aqui es que yo limito por alto. Y desconozco el ancho.

Y, no puedo ponerlo como fondo en css, porque son imagenes que se van cargando dinamicamente.

Gracias por las respuestas. ¿Alguien sabe alguna solucion?

[CrepitantE]

No encuentro otra función para centrar en CSS.

Has probado con la funcion HTML iframe???

[riskbert]

Prueba con margin-left:auto y margin-right:auto

A mi me ha funcionado

Mira si quieres mi web y css http://www.tusclasesparticulares.com

[aloqui]

Quizá no sea muy elegante, pèro puedes probar con el elemento <center>:

Código:

<center>
  <img src=...  />
</center>

[tunait]

Aplícale a la imagen un margin: auto; display: block;

[taote]

SOLUCIONADO

El problema era que la imagen dentro del marco, tenid activada la propiedad float: left, si se la quito y le pongo margin: 0 -25% consigue el efecto deseado.

Gracias por las respuestas.

[CrepitantE]

Huy vaya que si nos puso a pensar este problema. Solo era cuestion de un simple float.