| Kosten | Понедельник, 23 Сентября 2019 | Сообщение 1 |
| Создавая рамку для изображение, где изначально делаем ее прозрачной, то иногда нам нужно вывести подпись, как обозначение или простое название к изображению. Чтобы добавить подпись к изображению, добавьте в свой файл CSS следующее.
Добавьте этот класс в div, окружающий изображение в html
Код <div class="img-frame-cap">
Чтобы добавить подпись к изображению, добавьте в свой файл CSS следующее:
Код .img-frame-cap {
width:200px;
background:#fff;
padding:18px 18px 2px 18px;
border:1px solid #999;
}
Вам также нужно настроить другой класс для форматирования текста, чтобы заголовок находился по центру изображения. Я добавил поле в 4 пикселя над текстом, чтобы оно было не под изображением, где также можете отформатировать стиль шрифта здесь.
Код .caption {text-align:center;margin-top:4px;font-size:12px; }
Результирующий код для вашего HTML-файла должен выглядеть следующим образом
Код <div class="img-frame-cap"> <img src="http://zornet.ru/_fr/83/s5971949.jpg" width="200" height="256" alt="image name"> <div class="caption">Pink Rose</div> </div>
Это должно привести к изображению с рамкой и надписью, как показано ниже.
Ширина рамки идет аналогично ширине изображения, в данном случае это 200 пикселей. Надпись под изображением занимает дополнительное место в кадре, где шрифт для этой надписи имеет высоту 12 пикселей, с добавлением верхнего поля в 4 пикселя, чтобы оно не было прямо под изображением. Также добавлен 2 пиксельных отступа внизу текста, чтобы он был по центру в нижней части кадра.
Таким образом, у нас есть 12 пикселей для шрифта, плюс 2 пикселя снизу, плюс 4 пикселя сверху текста, что равно 18 пикселям. Это количество, которое мы должны установить для верхней и боковых сторон кадра. Вы должны будете настроить отступы таким же образом для вашего изображения, чтобы оно было равномерным со всех сторон.
Вы можете выровнять по центру или по левому или правому краю элемент div, установив еще один элемент div с внешней стороны этого и применив одинаковые поля с обеих сторон для центра, или float: left, или float: right.
| | Страна: (RU) |
| |
