Imágenes con texto o pie de foto grandes

[baltar2]

Hola,

Hago la consulta después de buscar una solución al problema que tengo.
Estoy maquetando un artículo para epub y dispone de imágenes con sus correspondientes pies de foto. La cuestión es que intento realizar en CSS alinear correctamente la imagen y su correspondiente pie de foto.
En principio, si el texto es coincidente con el tamaño de la imagen queda bien, pero si el texto del pie de foto es más grande que la imagen se produce el efecto de que la amplitud del pie de foto es más grande que la imagen en sí.

Como se indica en la imagen de ejemplo:



En la hoja de estilos he utilizado:

.imgizq{
float:left; /*para ponerlo a la izquierda */
margin:5px; /* un margen cualquiera */
}
.imgizq img, .imgder img{
display: block;
margin: 0 auto; /* centrar imagen */
}
.imgizq p, .imgder p{
text-align:center;
font-size: 0.8em;
font-style: italic;
}

En epub:

<div class="imgizq"><img src="..."...><p>texto pie de foto...</p></div>

En soluciones no me vale poner en imgizp p {width:%;} porque cada imagen tiene un tamaño diferente, tendría que ser una norma para todas las imágenes.

¿Alguna sugerencia?

[racba]

Que tal incluir un"<br>" en el texto de acuerdo a la imagen...??

[furoya]

Es que no se sabe dónde va a igualarse el texto con la imagen.

Lo que sí puede ponerse es un break después de la imagen, y el texto en un span. Para ahorrarnos los dramas del párrafo.

Pero si la imagen (como es su costumbre) tiene un ancho fijo, se puede dar al div el mismo valor de ancho (sumando los márgenes) y así el texto va a hacer un wrapping, un ajuste de línea, porque no se va a salir de la caja por el costado.