Выравнивание изображения средствами css

Изображение выравнивается по левому краю, по центру и по правому краю.

Если изображение выравнивается по левому краю текст обтекает по правой стороне.

Код следующий

<img align=”left” src=”kartinka.jpg”>

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

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

Padding-top:0; padding-left:0; padding-right:20px; padding-bottom:15px;

Что мы здесь написали?

А написали следующее: отступ от верхнего края ноль, потому что текст по умолчанию отступает от верхнего на ноль пикселей. Тогда текст и картинка будут выравниваться по одной линии.

Дальше отступ от левого края тоже ноль. Здесь также по умолчанию текст отступает от левого края на ноль. И соответственно текст и левый край изображения встанут по одной линии.
Третий параметр padding-right:20px задает то, что картинка будет отделена от текста, который обтекает его справа, на двадцать пикселей.
Четвертый параметр padding-bottom:15px; здесь вы уже поняли: картинка будет отделена снизу от текста на пятнадцать пикселей.

Почему на пятнадцать? Потому что нужно учитывать межстрочный интервал. Его мы тоже можем задать в стилях для тега <p>. Если его не задавать стили будут задаваться по умолчанию стилями браузерами пользователя. И тогда пользователь увидит вашу страницу немного иначе.

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

Хотя многие программисты этими мелочами особо не заморачиваются. Кому какое дело сколько внизу отступать.
 

Теперь о выравнивании картинки по центру. Код следующий

<img align=”center” src=”kartinka.jpg”>

Текст обтекает с обеих сторон. Но только при условии, если картинка по ширине меньше ширины текста в два раза. А в большинстве случаев так никто не делает. Чаще всего используют вариант: картинка ставится на всю ширину текста или чуть меньше, а текст пишется сверху и снизу. Это самый распространенный вариант верстки.
 

А третий вариант. Код следующий

<img align=”right” src=”kartinka.jpg”>

Выглядит вот так. Как на картинке справа. Здесь все тоже самое что и в варианте align=left. Отступы вы тоже можете задать через стили.

Есть также вариант быстрый и простой. Только немного не аккуратный. Задается параметрами HTML. Это вы сразу после тега <img пишете vspace=20px и hspace=20px. Сокращенный вариант слов vertical space и gorizontal space.

А почему не аккуратный?

Потому что теги vspace и hspace задают расстояние от изображения с обеих сторон, снизу и сверху. Поэтому картинка не стоит на одной линии от края текста. Не вполне эстетично.

Ну да ладно. Это уже вам решать. А так в принципе вы поняли, как сделать выравнивание изображения средствами css. И не забывайте выносить все стили в отдельный файл style.css
 

Добавить комментарий


( ! ) Ф.И.О.
( ! ) Текст сообщения: (Не больше 5000 знаков)

( ! )Введите текст с картинки :
Обновить код
Положительный отзыв Положительный отзыв
Отрицательный отзыв Отрицательный отзыв



Коллекция скриптов и модулей   © 2017