Объявление vertical-align: bottom выравнивает низ строкового блока элемента по низу контейнера строки. Например, результат применения следующей разметки:

.feeder {vertical-align: bottom;}
<p>This paragraph, as you can see quite clearly, contains a <img src="
tall.gif" alt="tall" class="feeder" /> image and a <img src="short.gif" alt="
short" class="feeder" /> image, and then some text that is not tall.</p>

Нижние края которых выровнены относительно друг друга. Они также находятся ниже базовой линии текста. Значение vertical-align: text-bottom измеряется относительно нижней линии текста строки. При этом замещаемые или любые другие нетекстовые элементы игнорируются. Вместо этого учитывается «применяемый по умолчанию» текстовый блок. Этот стандартный блок происходит от font-size родительского элемента, и низ строкового блока выровненного элемента выравнивается относительно низа стандартного текстового блока. Таким образом, применив показанную ниже разметку, мы получаем результат:

img.tbot {vertical-align: text-bottom;}
<p>Here: a <img src="tall.gif" style="vertical-align: middle;" alt="tall" />
image, and then a <img src="short.gif" class="tbot" alt="short" /> image.</p>

Добавлено: 17 Июля 2018 22:16:04 Добавил: Андрей Ковальчук Нравится 0

Добавить