Мобильная версияВ моем шаблоне электронного письма есть аватар, на котором отображается только первая буква текста на круглом фоне. Поскольку я не могу использовать JavaScript в шаблонах электронных писем, для этого я использую только CSS. Вот HTML-код, который я использую:
Джон Доу
Я получаю ожидаемый результат с помощью этого кода везде, где бы я ни тестировал, кроме приложения Gmail для Android. Вот скриншоты из приложения:
Как видите, текст не выровнен по вертикали. Поскольку это происходит в приложении, а не в браузере, я не могу проверить элементы и устранить проблему.
В чем может быть причина неправильного выравнивания текста в приложении? И какое решение?
ОБНОВЛЕНИЕ 1
Пытался исправить это, избавившись от display: inline-block и vertical-align: middle и использовав display: table и < вместо этого code>display: table-cell. Не устранил проблему. в приложении Gmail он по-прежнему выглядит так же. Вот обновленный код:
Садман Ризван
ОБНОВЛЕНИЕ 2
Я обнаружил, что высота строки текста больше, чем высота родительского div, и поэтому текст не выровнен по вертикали внутри родительского div. Но я не знаю, как это возможно, поскольку для обоих я установил 36 пикселей. Я также не знаю, становится ли родительский div меньше или высота строки увеличивается в приложении Gmail. Есть ли способ это выяснить?
ОБНОВЛЕНИЕ 3
Наконец, мне удалось решить проблему, используя display: table-cell для вертикального выравнивания, а не line-height. Вот окончательный код:
Джон Доу
