Как добавить текст под картинкой в html?

Количество просмотров: 2866

В данной статье рассмотрим способы размещения текста под картинкой в html документе. Существует несколько разных вариантов как выполнить данную задачу.

Начнем с самого правильного и нового.

В html 5 добавлен новый тег <figure>. Данный тег используется для разметки независимого блока с демонстрационными материалами будь то, графики, изображения, куски кода и т.д.

Такие материалы сопровождаются подписями - комментариями разъясняющими информацию на изображении. Для этих целей используется тег <figcaption> который размещается внутри <figure> в начале или в конце.

Посмотрим на новые теги в действии.

<figure class="image">
<img src="up.png"> 
<figcaption>текст под картинкой</figcaption>
</figure>

Внутри тега <figure> мы разместили картинку и подпись. Теперь применим CSS стили.

figure{
	position: relative;
    width: 300px;
    margin: 20px auto;
    border-radius: 5px; 
    box-shadow: 0 0 5px #999999; 
    
}


.image figcaption{

    padding: 15px 5%;
    text-align: center;
}

/*если картинка больше чем 300px, то стоит добавить еще и эти стили*/
figure img{
width: 300px;
}

В итоге получаем картинку с размещенной подписью под ней.

текст под картинкой

Полный пример кода страницы с картинкой.

<html>
<body>
<head>

<style>
figure{
    position: relative;
    width: 300px;
    margin: 20px auto;
    border-radius: 5px; 
    box-shadow: 0 0 5px #999999; 
    
}
figure img{
width: 300px;
}

.image figcaption{

    padding: 15px 5%;
    text-align: center;
}
</style>
</head>
<figure class="image">
<img src="3.jpg"> 
<figcaption>текст под картинкой</figcaption>
</figure>
</body>
</html>

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

Рассмотрим еще один способ добавления подписи под изображение с помощью html таблиц.

Создадим простую таблицу с двумя строками содержащих 1 ячейку.

<table>
<tr><td><img src="kotik.png"></td></tr>
<tr><td>текст под картинкой</td></tr>
</table>

Применим стили для текста и изображения.

td{
	
	text-align: center; // выравнивание текста по центру
}
td img{
	width: 300px; // ширина картинки в ячейке
}



текст под картинкой

Данный способ так же имеет право на существование и даже много где используется, однако лучше использовать первый способ с <figure> и <figcaption>

Надеюсь , что статья была Вам полезна. До новых встреч!

© 2015-2018 Goodweb.me --- Карта сайта --- info@goodweb.me

Наверх