Выравнивание inline изображений с помощью css свойства vertical-align
Я недавно получил вот такой вопрос:
Как Вы делаете вертикальное выравнивание маленькой картинки относительно текста?
Ответ:
Давайте начне с небольшого примера - параграф в котором есть одна строчка с текстом и одно маленькая картинка.
Далее нужно обратить внимание на 6 главных линий по которым можно сделать вертикальное выравнивание.
Линии для выравнивания
1. top line - линия над содержанием
2. text-top line - линия по вершине текста
заметьте: линии "top" и "text-top" очень похожи но не одинаковы. Одако иногда линия "top" (показана красным) выше чем высота текста и поэтому распологается выше чем линия "text-top" (показана зеленым)
3. middle line - линия, которая распологается вертикально по середине текста.
4. baseline - воображаемая линия, на которой "сидит" весь текст.
5. text-bottom - линия, которая распологается по нижней касательной к тексту.
6. bottom line - линия, которая распологается под текстом.
Вертикальное выравнивание (vertical-align) изображения по умолчанию
По умолчанию изображение выравнивается по основанию строки (baseline) - если к параграфу не применяли нижний отступ (margin-bottom). В примере ниже к изображению был применен нижний отступ равный 5px (margin-bottom: 5px), что заставило изображение поднятся на 5px выше нижней линии параграфа.
vertical-align с помощью css
Вы легко можете изменить вертикальное положение изображение относительно строки используя стандартное css свойство
vertical-align.
Разнообразие параметров свойства которые Вы можете использовать включают:
- top
- text-top
- middle
- baseline
- text-bottom
- bottom
- sub
- super
- percentage
- length
top
Выравнивание изображения по верхней линии параграфа.
img.class-name {
vertical-align:top;
}
text-top
Выравнивание изображения по верхней линии строки.
img.class-name {
vertical-align:text-top;
}
middle
Выравнивание изображения вертикально по середине параграфа.
img.class-name {
vertical-align:middle;
}
baseline
Выравнивание изображения по нижней линии текста.
img.class-name {
vertical-align:baseline;
}
text-bottom
Выравнивание изображения по нижней линии текста включая высокие символы.
img.class-name {
vertical-align:text-bottom;
}
bottom
Выравнивание изображения по нижней линии параграфа.
img.class-name {
vertical-align:bottom;
}
sub
Выравнивание изображения по нижней линии текста не смотря на то, существует ли нижнее содержание.
img.class-name {
vertical-align:sub;
}
super
Выравнивание изображения по нижней линии текста не смотря на то, существует ли верхнее содержание .
img.class-name {
vertical-align:super;
}
Вертикальное выравнивание с помощью процентного соотношения.
Позволяет выровнять изображение относительно высоты строки.
img.class-name {
vertical-align:30%;
}
img.class-name {
vertical-align:-30%;
}
Вертикальное выравнивание с помощью точных значений.
Позволяет установить положение изображения выше или ниже от текста. Если значение установлено в "0px" то положение изображения будет таким же как и использовании параметра "baseline"
img.class-name {
vertical-align:2px ;
}
img.class-name {
vertical-align:-2px ;
}
А что насчет Вас? Вы используете свойство
vertical-align для позионирования изображений относительно текста?
Оригинал: Aligning inline images with the vertical-align property
Добавить комментарий
