Приветствую всех читателей данной публикации и подписчиков моего обучающего блога. Сегодня разберем интересную и востребованную тему, связанную с css как выровнять изображение по центру.
Я в деталях расскажу, как установить вокруг картинки отступы и выровнять ее не только по горизонтали, но и по вертикали в текстовом контенте, укажу, какими инструментами веб-языков стоит пользоваться и конечно же приведу конкретные примеры. А теперь приступим к делу!
Главные инструменты для работы с изображениями
Для начала напомню, что за отображение графической информации в html отвечает тег <img>. Для редактирования расположения картинок, указания способа обтекания и расстояния между другими объектами, расположенными на веб-странице, нам понадобятся знания таких css-свойств:
- padding
- margin
- float
- text-align
Начнем разбор полетов с последнего элемента.
Text-align обычно используют для выравнивания текста, однако он также предусмотрен и для форматирования расположения изображений. В своем арсенале text-align имеет такие ключевые слова, как center – центрирует объект, right и left – выравнивают по правому или левому краю соответственно, justify – выравнивает по ширине блока.
Также начиная с css3 появились такие параметры как start и end. Они функционируют почти также, как right и left, однако выравнивание происходит автоматически в зависимости от правил написания текста (справа налево или слева направо).
Очень полезным свойством является float. С его помощью можно указать как именно должна обтекаться фотография контентом. Так, при указании right выбранный элемент размещается справа, а другие объекты обтекают его с левой стороны.
При указании left думаю вы и сами догадались, что произойдет – эффект будет зеркальным.
Также можно указать none – отменить обтекание и inherit – унаследовать характеристики предка.
Еще в начале обучающего раздела о css и html я публиковал целую статью, посвященную отступам. Для лучшего понимания темы прочтите и ее.
А сейчас разберем, что же такое padding и margin, а также их отличия.
Итак, padding отвечает за расстояние внутри элемента: от контента до границы блока, а margin – за отступ от внешней границы указанного объекта до края родительского элемента или же если его нет, то до внутренней границы вкладки браузера.
Это очень гибкие элементы. Условия можно задавать в разных единица измерения как одновременно для всех сторон, так и для каждой отдельно. К тому же дописывая через дефис название стороны (например, для нижнего внутреннего отступа padding- bottom) можно добиться того же эффекта.
Глобальный примерчик
В одном примере я объединил весь теоретический материал, чтобы показать, как эффективно можно пользоваться данными свойствами.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фотография с подписью</title>
<style>
body {
background: url(https://delaisait.ucoz.ru/_ph/9/873853212.jpg) no-repeat;
background-size: cover;
}
div {
margin: 9% 20% 10% 20%;
width: 60%;
font-size: 22px;
}
h2 { color: red; font-size: 35px; font-family: Arial; border-bottom: 3px double; text-align:center;}
p {text-align:justify;}
img {
border: 1px solid;
margin-bottom: 3px;
padding: 19px;
background:#CD853F;
}
#photo {text-align: center;}
#f-photo, #f-text {float: right; width: 50%;}
</style>
</head>
<body>
<div>
<h2>Владимир Креститель</h2>
<p id="photo"><img src="http://nevsky.kharkiv.org/wp-content/uploads/2013/07/%D0%9A%D1%80%D0%B5%D1%89%D0%B5%D0%BD%D0%B8%D0%B5-%D0%A0%D1%83%D1%81%D0%B8-580x250.jpg" alt="Владимир"></p>
<p>Владимир Святославич по легендам и старинным былинам известен еще и как Владимир Красное Солнышко.</p>
<p id="f-text">Он выпускал свои собственные монеты. На фотографии изображен златник.</p>
<p id="f-photo"></p>
</div>
</body>
</html> |
Публикация подошла к концу. Буду рад новым подписчикам! Не жадничайте и делитесь ссылкой на мой блог с друзьями. Желаю удачи в освоении темы!
Пока-пока!
С уважением, Роман Чуешов
