Как добавить текст под центрированное изображение

Question

На этом question есть great solution о том, как добавить центрированное изображение на страницу.

• Чистый раствор CSS
• Не нарушая поток документов (отсутствие поплавков или абсолютное позиционирование)
• совместимость кросс-браузер (даже IE6)
• Полностью отзывчивый.
• центрирован

Решение http://jsfiddle.net/avrahamcool/d89xh/

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
#over { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 
.Centerer { 
 
    display: inline-block; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
} 
 
.Centered { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<div id="over"> 
 
    <span class="Centerer"></span> 
 
    <img class="Centered" src="http://th07.deviantart.net/fs71/200H/f/2013/236/d/b/bw_avlonas_a5_beach_isles_wallpaper_image_by_lemnosexplorer-d6jh3i7.jpg" /> 
 
</div>

Но как изменить это решение, чтобы добавить дополнительный текст только под центром изображения, поэтому он всегда будет с центром.

Любые мысли?

Answer 1

Вы можете использовать <figure> и <figcaption>:

<figure> 
    <img /> 
    <figcaption>Image</figcaption> 
</figure> 

И дать родительский элемент, text-align: center;.

Отрывок

.center {text-align: center;}

<div class="center"> 
 
    <figure> 
 
    <img src="http://placehold.it/250?text=IMG" alt=""> 
 
    <figcaption>Hello</figcaption> 
 
    </figure> 
 
</div>

Preview:

Fiddle: http://jsfiddle.net/0p53fxgk/

Preview:

Cross Browser Check

• Internet Explorer 9
• IE Край
• Firefox
• Chrome
• Opera

Для IE ниже 9, вы можете использовать:

figure, figcaption {display: block;}