Разметка: выравнивание изображения

Добро пожаловать на выравнивание изображений! Лучший способ продемонстрировать приливы и отливы различных вариантов позиционирования изображений – это втиснуть их в океан слов. Берите весло и давайте начнем.

По теме выравнивания следует отметить, что пользователи могут выбрать один из вариантов None, Left, Right и Center. Кроме того, они также получают варианты Thumbnail, Medium, Large & Fullsize.

Выравнивание изображения 580x300

Так получилось, что изображение выше
по центру
.

Выравнивание изображения 150x150Остальное в этом абзаце – это наполнитель, чтобы видеть, как текст обворачивается вокруг изображения 150х150, которое
выровнен по левому краю
.

Как вы можете видеть, должно остаться некоторое пространство над, под и справа от изображения. Текст не должен ползти по изображению. Ползучесть – это просто неправильно. Изображениям тоже нужна передышка. Пусть они говорят, как твои слова. Пусть делают свою работу без всяких хлопот со стороны текста. Еще примерно через одно предложение здесь мы увидим, что текст плавно переходит справа от изображения вниз под картинку. Опять же, давая возможность сделать свое дело. Миссия выполнена!

А теперь для
массивного изображения
. У него также нет
нет выравнивания
.

Выравнивание изображения 1200x400

Изображение выше хоть и шириной 1200px, но не должно переполнять область контента. Он должен оставаться сдержанным без видимого нарушения потока контента.

Выравнивание изображения 300x200

А теперь мы собираемся сдвинуть все в сторону
вправо.
. Опять же, над, под и слева от изображения должно быть много места. Только посмотрите на него там… Эй, парень! Так держать, чтобы зажечь правую сторону. Мне плевать, что написано на выровненной слева картинке, ты выглядишь великолепно. Не позволяйте никому другому говорить вам другое.

Здесь вы должны увидеть, как текст начнет заворачиваться под выровненное справа изображение и хорошо устроится. Места еще должно быть много и все должно сидеть красиво. Да… Вот так просто. Никогда еще не было так приятно быть правым.

И как раз когда вы думали, что мы закончили, мы сделаем их снова с титрами!

Выравнивание изображения 580x300
Посмотрите, как 580×300 получает любовь к титрам.

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

Выравнивание изображения 150x150
Итти-бита надпись.

Остальное в этом абзаце – это наполнитель, чтобы видеть, как текст обворачивается вокруг изображения 150х150, которое
выровнен по левому краю
.

Как вы можете видеть, должно остаться некоторое пространство над, под и справа от изображения. Текст не должен ползти по изображению. Ползучесть – это просто неправильно. Изображениям тоже нужна передышка. Пусть они говорят, как твои слова. Пусть делают свою работу без всяких хлопот со стороны текста. Еще примерно через одно предложение здесь мы увидим, что текст плавно переходит справа от изображения вниз под картинку. Опять же, давая возможность сделать свое дело. Миссия выполнена!

А теперь для
массивного изображения
. У него также нет
нет выравнивания
.

Выравнивание изображения 1200x400
Массивный имиджевый комментарий для ваших глазных яблок.

Изображение выше хоть и шириной 1200px, но не должно переполнять область контента. Он должен оставаться сдержанным без видимого нарушения потока контента.

Выравнивание изображения 300x200
Приятно быть правым все время.

А теперь мы собираемся сдвинуть все на
вправо.
. Опять же, над, под и слева от изображения должно быть много места. Только посмотрите на него там… Эй, парень! Так держать, чтобы зажечь правую сторону. Мне плевать, что написано на выровненной слева картинке, ты выглядишь великолепно. Не позволяйте никому другому говорить вам другое.

Здесь вы должны увидеть, как текст начнет заворачиваться под выровненное справа изображение и хорошо устроится. Места еще должно быть много и все должно сидеть красиво. Да… Вот так просто. Никогда еще не было так приятно быть правым.

И на этом все, йоу! Ты выжил в бурных водах выравнивания. Достижение выравнивания образа разблокировано! И последнее: Последний пункт в содержании этого поста – миниатюра, плавающая справа. Убедитесь, что любые элементы после контента очищаются должным образом.