Выравниваем картинку по вертикали

Выравниваем картинку по вертикали

Если вы создавали хоть раз шаблон для своего сайта, то скорее всего сталкивались с необходимостью вставить маленькую картинку в тексте перед номером телефона, icq или skype.


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

Для того, что бы наша картинка не ломала строку необходимо выровнять её по вертикали, делается это при помощи css:

img {vertical-align: middle}

просто не правда ли? Но теперь все картинки на сайте будут выровнены по вертикали, что нам не подходит. необходимо переписать код таким образом, что бы данное свойство было применено только к картинкам находящимся в определённом блоке:

.block img {vertical-align: middle}

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

Дополнив данное правило по своему вкусу мы можем ещё более упорядочить визуально нашу картинку. Для примера сделаем ей отступ справа в 7 пикселей.

.block img {vertical-align: middle;margin-right:7px}


sbird    Уроки    645

Комментарии отсутствуют

Добавление комментариев доступно только зарегистрированным пользователям