Смайлик заставляет html текстовые элементы не выравниваться по вертикали - PullRequest
Новая
       36

Смайлик заставляет html текстовые элементы не выравниваться по вертикали

0 голосов
/ 14 февраля 2020

У меня есть файл .jspx с html

<label for="foo">Country:</label>
<div id="foo"><c:out value="FooBar-islands"/></div> <br/>

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

Когда я добавляю смайлик, как показано ниже, они больше не выравниваются. 

<label for="foo">Country:</label>
<div id="foo"><c:out value="?"/></div> <br/>

Если я добавляю смайлик также в метку: 

<label for="foo">Country:?</label>
<div id="foo"><c:out value="?"/></div> <br/>

Затем они снова выравниваются.

Я хочу сделать минимальное посягательство на код этой страницы. Такое ощущение, что при добавлении смайлика меняется кодировка, и это портится с базовой линией текста.

Можно ли это исправить, не меняя структуру с помощью label / div? (Я искал невидимые / ненавязчивые смайлики для добавления на ярлык, но не нашел ни одного)

1 Ответ

0 голосов
/ 14 февраля 2020

Я попытался обернуть строку в div с помощью: 

.centeredRow {
    display: flex;
    flex-direction:row;
    align-items: center;
}

Больший разрез, чем хотелось бы, но выравнивание немного лучше.

Это также не идеально выровнено , Это один пиксель, текст без кодировки смайликов на один пиксель выше. Я предполагаю, что это все еще из-за кодировки текста базовых махинаций.

Я приглашаю лучшие ответы.

...