Despu�s de probar todas vuestras posibles soluciones, he llegado a la misma conclusi�n de Choan: usar una tabla. A fin de cuentas, es informaci�n que puede considerarse tabular, con lo que ser�a una soluci�n "legal" ;-)

Respecto al c�digo de Choan, habr�a que ampliar la �ltima clase para colocar el texto a la mitad, pero nuestro navegador "favorito" se sigue sin enterar de nada:

.img-caption .caption {
        display: table-cell;
        vertical-align: middle;
}

As� que much�simas gracias a todos por vuestra ayuda. ;-)


Choan C. G�lvez wrote:
Sergio G�mez wrote:

Hola a todos.

Llevo un tiempo buscando una soluci�n decente (y sin tablas) para colocar un texto a la derecha (o izquierda) de una imagen, y que est� centrado respecto a su altura. Os env�o imagen para explicarme mejor. �Alguien sabe c�mo hacerlo?


Bueno... despu�s de dedicarle unos minutos, s�, pero con _peros_:
* No funcionar� en ninguna de las versiones de IE existentes actualmente (y desde luego, en ning�n NN4.x)
* Requiere tanto marcado HTML (o casi) como una tabla.


En fin, esta es mi soluci�n (solo la he probado con FireFox 0.8):

HTML:

<div class="img-caption">
    <div class="imagen">
        <img src="Du.jpg" />
    </div>
    <div class="caption">
        tra la r�
    </div>
</div>

CSS:

.img-caption {
    display: table;
}

.img-caption img {
    display: block;
}

.img-caption .imagen {
    display: table-cell;
}
.img-caption .caption {
    display: table-cell;
}

Supongo que tambi�n funcionar� sin problemas en Opera, Safari, etc.

Pero... seguir�s sin poder ordenar (derecha/izquierda) la imagen y el texto desde la hoja de estilo.

Conclusi�n: yo usar�a una tabla.

Un saludo,
Choan
--
Mundo Du, cuentos breves, relatos sorprendentes: http://du.lacalabaza.net/

_______________________________________________
Ovillo mailing list
[EMAIL PROTECTED]
http://ovillo.org/mailman/listinfo/ovillo_ovillo.org


_______________________________________________ Ovillo mailing list [EMAIL PROTECTED] http://ovillo.org/mailman/listinfo/ovillo_ovillo.org

Responder a