Pues tras comprobar que un centenar de personas han pasado por aquí y nadie ha contestado nada, empiezo a plantearme que formulo incongruencias. O eso o que los buenos entendidos ya no rulan por aquí.
Para el que le interese, encontré una medio solución.
Teniendo que plantearse que todas las fotos tendrán el mismo ancho en horizontal -440 px- y el mismo ancho en vertical -330 px-, llamaré a la capa que contendrá la foto horizontal y su pie de texto así:
Código HTML:
<div class="imgreportaje">
<img class="foto" src="http://www.forosdelweb.com/customavatars/avatar316361_1.gif" width="440" height="44" alt="Maicro." />
<p class="piefotoreportaje">Avatar de Maicro. Avatar de Maicro.</p>
</div>
Su estilo será:
Código:
div.imgreportaje {
width: 440px;
margin: 0 auto;
text-align: justify;
margin-top: 10px;
}
Y la capa que contendrá la imagen vertical así:
Código HTML:
<div class="imgreportaje v">
<img class="foto" src="http://www.forosdelweb.com/customavatars/avatar316361_1.gif" width="330" height="33" alt="Maicro." />
<p class="piefotoreportaje v">Avatar de Maicro. Avatar de Maicro.</p>
</div>
Con este estilo:
Código:
div.v {
padding-left: 110px;
}
p.v {
padding-right: 110px;
}
Lo que desconocía es que podía diferenciar un
class de esa manera, con un espacio, y es lo que me dio la solución. Patán de mí :D
Ese
padding, cuyo valor es la diferencia de ancho entra ambas tomas -no la mitad porque el
padding ensancha a la capa-, permitirá desplazar la capa de las fotos verticales 55 pixeles a la derecha y parecerá que todas las fotos del reportaje están alineadas.
Es lo único que me ha permitido conseguir el efecto que buscaba, pero me ha limitado a que las fotos que vayan como reportajes siempre estén al mismo tamaño.
Espero que ayude en un futuro a alguien. Si algún experto encuentra algún fallo en mi planteamiento, por favor, que me corrija. Gracias a todos.
El efecto se puede ver aquí:
http://www.maicro.es/centrado.htm