¿Cómo alinear el texto debajo de una imagen en CSS?

Te recomendamos que pruebes esta solución en un entorno controlado antes de enviarlo a producción, saludos.

Solución:

Agregue un contenedor div para la imagen y el título:

    






    Text below the image

Luego, con un poco de CSS, puede crear una galería de imágenes que se ajuste automáticamente:

div.item 
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 120px;

img 
    width: 100px;
    height: 100px;
    background-color: grey;

.caption 
    display: block;

div.item 
    /* To correctly align image, regardless of content height: */
    vertical-align: top;
    display: inline-block;
    /* To horizontally center images and caption */
    text-align: center;
    /* The width of the container also implies margin around the images. */
    width: 120px;

img 
    width: 100px;
    height: 100px;
    background-color: grey;

.caption 
    /* Make the caption a block so it occupies its own line. */
    display: block;

    
    Text below the image


    
    Text below the image


    
    An even longer text below the image which should take up multiple lines.


    
    Text below the image


    
    Text below the image


    
    An even longer text below the image which should take up multiple lines.

http://jsfiddle.net/ZhLk4/1/

respuesta actualizada

En lugar de usar div y spans ‘anónimos’, también puede usar HTML5 figure y figcaption elementos. La ventaja es que estas etiquetas se suman a la estructura semántica del documento. Visualmente no hay diferencia, pero puede afectar (positivamente) la usabilidad y la indexabilidad de sus páginas.

Las etiquetas son diferentes, pero la estructura del código es exactamente la misma, como puede ver en este fragmento y violín actualizados:

figure.item 
    /* To correctly align image, regardless of content height: */
    vertical-align: top;
    display: inline-block;
    /* To horizontally center images and caption */
    text-align: center;
    /* The width of the container also implies margin around the images. */
    width: 120px;

img 
    width: 100px;
    height: 100px;
    background-color: grey;

.caption 
    /* Make the caption a block so it occupies its own line. */
    display: block;

http://jsfiddle.net/ZhLk4/379/

La mejor manera es envolver el texto de la imagen y el párrafo con un DIV y asignar una clase.

Ejemplo:

    

        
        
It's my first Image
    
    ...
    ...
    ...
    ...

Te mostramos las reseñas y valoraciones de los lectores

Nos encantaría que puedieras mostrar este escrito si lograste el éxito.

---

---

Utiliza Nuestro Buscador