Вертикально выровнять середину изображения по полной высоте шрифта по оси X
В CSS есть свойство vertical-align: middle для строчных элементов, которое выравнивает середину элемента по вертикали до половины высоты x шрифта родительского элемента. Однако это часто ставит изображения немного ниже, чем мне хотелось бы. Есть ли способ вертикально выровнять середину произвольного изображения по полной высоте x шрифта родительского элемента?
Например, установка vertical-align: calc(1ex - 50%) на изображении не работает, поскольку она занимает 50 % высоты родительского элемента, а не 50 % высоты изображения.
Фактический результат vertical-align: middle с использованием изображения :
img {
vertical-align: middle;
}<p>This is some text with an <img src = "https://i.sstatic.net/fPdDaN6t.png"> image</p>Изображение вывода:
Желаемый результат:
Пробовали ли вы указать поля и нулевые дополнения (поскольку по умолчанию некоторые элементы имеют это значение), попробуйте использовать проверку консоли вашего браузера.
Ответы 1
Кажется, добавление transform: translatey(-0.5ex); к vertical-align: middle; в некоторой степени помогает:
img {
vertical-align: middle;
transform: translatey(-0.5ex);
width: 20px; /* unrelated */
}
body {
font-size: 22px;
}<span style = "font-family: serif; word-spacing: -.5ch;">
x <img height = "10" src = "https://i.sstatic.net/fPdDaN6t.png">
x <img height = "40" src = "https://i.sstatic.net/fPdDaN6t.png">
x <img height = "80" src = "https://i.sstatic.net/fPdDaN6t.png">
x <img height = "120" src = "https://i.sstatic.net/fPdDaN6t.png">
x
</span>
<span style = "font-family: Impact; word-spacing: -.3ch;">
x <img height = "10" src = "https://i.sstatic.net/fPdDaN6t.png">
x <img height = "40" src = "https://i.sstatic.net/fPdDaN6t.png">
x <img height = "80" src = "https://i.sstatic.net/fPdDaN6t.png">
x <img height = "120" src = "https://i.sstatic.net/fPdDaN6t.png">
x
</span>
<span style = "font-family: monospace; word-spacing: -1ch;">
x <img height = "10" src = "https://i.sstatic.net/fPdDaN6t.png">
x <img height = "40" src = "https://i.sstatic.net/fPdDaN6t.png">
x <img height = "80" src = "https://i.sstatic.net/fPdDaN6t.png">
x <img height = "120" src = "https://i.sstatic.net/fPdDaN6t.png">
x
</span>Предположительно, этот обходной путь с треском провалится для шрифтов с непропорционально высокими нижними элементами и узкой высотой прописи, в результате чего базовая линия сместится необычно высоко в линейном блоке. (Сейчас не могу найти хороший пример, возможно, в CSS «полоса» высоты x все-таки всегда центрирована (?))
На самом деле это работает довольно хорошо. Если у вас несколько строк, это приведет к тому, что изображения будут на 0,5ex выше, но вы можете решить эту проблему, добавив margin-top: 0.5ex; margin-bottom: -0.5ex; к изображению.
Есть ли какие-либо другие ограничения (например, высота изображения), известные заранее в вашем случае использования? Возможно, это поможет. В противном случае я предполагаю, что вы ищете универсальное решение для изображений любой высоты внутри текста любого размера и метрики, чего, насколько мне известно, на самом деле, к сожалению, не существует в надежном и кросс-браузерном виде. (Центрировать некоторые вещи относительно других в CSS по-прежнему сложно.)