Текст не вертикально центрирован

Ответ 1

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

Для платных шрифтов всегда добавляйте все файлы расширения шрифтов в папку шрифтов/вендоров и используйте следующий формат для добавления шрифтов в таблицу стилей.

формат шрифта:

       @font-face {
         font-family: 'MyWeb';
         src: url('webfont.eot'); /* IE9 Compat Modes */
         src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
         url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Для получения дополнительной информации вы можете обратиться по ссылке ниже: https://css-tricks.com/snippets/css/using-font-face/

Ответ 2

JSFiddle!

Помните, если вы устанавливаете фиксированную высоту, а также корректируете размер шрифта, высоту строки, то ее граница должна быть беспорядочной. Вы либо делаете его поплавком, либо удаляете высоту и позволяете ей занимать столько же высоты, сколько требуется, либо вручную устанавливаете большую высоту, но все же различные методы рендеринга, используемые в разных браузерах, затруднят вам поддерживать одинаковый внешний вид браузера, поэтому я предлагаю метод, который я использовал в JSFiddle.

вы можете компенсировать разницу, применяя отступы.

padding-bottom: 5px;

Ответ 3

Вы хотите добавить/изменить a line-height.

Чтобы получить q и b в середине, используйте line-height:16px;, однако some text будет выглядеть изворотливым. Размещайтесь с 16px;, и вы можете найти то, что хотите.

Пример:

div{
    line-height:16px;
}

Ответ 4

Вы можете обернуть свою текстовую часть в другую <div> и попробовать display:table и display:table-cell с помощью verical-align:middle

Хотя это отличается от вашего требования, но я думаю, что вы должны практиковаться таким образом:

Удалить высоту линии полностью из родительского

HTML

<div class="container"><div class="content">qb - Some text - qb</div></div>

CSS

.container {
    background-color: green;
    height: 55px;
    display:table; // here it is
    font-size: 20px;
    font-family: 'Segoe UI', 'Verdana', 'Arial';
}
.content{
    display:table-cell; // here it is
    vertical-align:middle;
}

Пример скрипта

Ответ 5

div - это неправильный элемент для вас в этом случае. Просто попробуйте этот вариант и сравните:

span {
    background-color: green;
    height: 22px;
    line-height: 22px;
    font-size: 20px;
    font-family:'Segoe UI', 'Verdana', 'Arial';
}

div {
    background-color: green;
    height: 22px;
    line-height: 22px;
    font-size: 20px;
    font-family:'Segoe UI', 'Verdana', 'Arial';
}

и

<span>qb - Some text - qb|ÜÄÖ</span>
<br><br>
<div>qb - Some text - qb|ÜÄÖ</div>

Ответ 6

Браузеры действуют нормально. Вы можете быть смущены, потому что ваш размер шрифта, 20 пикселей меньше, чем высота вашей линии, 22 пикселя, и похоже, что он будет вписываться. Но это не так.

В качестве примера установка размера шрифта H1 на 24px создаст высоту строки 39 пикселей. Размер шрифта 12px приведет к высоте строки 18px.

Ответ 7

Попробуйте добавить дополнение к вашему коду.

Пример:

div {
     background-color: green;
     height: 22px;
     line-height: 22px;
     font-size: 20px;
     font-family: 'Segoe UI', 'Verdana', 'Arial';
     padding: 5px 0;
}

Ответ 8

Я предполагаю, что это то, что вы ищете: http://jsfiddle.net/KFxG3/19/

Вам нужно добавить строку ниже в ваш CSS.

 padding-bottom:5px;

Однако это не значит, что строка должна "работать". Насколько мне известно, нижняя часть букв, таких как p и q, не учитывается в среднем значении высоты шрифта. Чтобы получить довольно точный результат, вам придется измерять большую заглавную букву.

Вам не нужна высота div, кстати, если вам не нужна какая высота будет снаружи.

Я бы посоветовал вам заглянуть в "размер коробки". Чтобы предотвратить расширение проложенного элемента наружными размерами.

Кроме того, использование старых браузеров в качестве меры правильных и неправильных способов сделать вещи, вероятно, не самый безопасный подход к любым выводам, связанным с CSS.

Ответ 9

Это похоже на 4 года, но иногда вам нужно проверить правильность размеров коробки.

a{
  box-sizing: content-box
}

Затем ваша высота и высота линии должны центрировать текст.

Ответ 10

Я знаю, что могу немного опоздать, но лучше поздно, чем никогда. Да, вы правы - это проблема с вашим шрифтом, в вашем случае с восходящим.

Чтобы это исправить, вам нужно изменить опечатку (в некоторых других случаях).

Одно решение для пользователей Mac:
"Чтобы отредактировать их в шрифте, вам нужно скачать Apple Font Tool Suite. После установки вам нужно открыть терминал и перейти в каталог, содержащий ваш шрифт. После этого введите следующую команду:

ftxdumperfuser -t hhea -A d font.ttf

Это создаст файл с именем font.hhea.xml, откроет этот новый файл в текстовом редакторе и отрегулирует значения для ascender и descender. Как правило, если ваш шрифт расположен слишком низко, вы хотите уменьшить его и увеличить. После редактирования и сохранения введите следующую команду в терминал, чтобы восстановить файл Font:

ftxdumperfuser -t hhea -A f font.ttf

Теперь вы можете использовать файл font.ttf в вашем приложении. Если шрифт по-прежнему неправильный, просто повторите описанную выше процедуру, пока вы не будете счастливы. "- Источник: Энди Ярдли

Ответ 11

Вы применяете определенную высоту для div и line-height. Вам не нужно ничего, чтобы центрировать вертикальный текст.

div {
    background-color: green;
    font-size: 20px;
    font-family: 'Segoe UI', 'Verdana', 'Arial';
}

Пример: http://jsfiddle.net/KFxG3/2/

Ответ 12

vertical-align: middle;
padding-bottom:5px;

вам нужно добавить в свой css

Ответ 13

Вот обновленная скрипка http://jsfiddle.net/KFxG3/16/

Вам нужно удалить элемент высоты. div вычисляет высоту в соответствии с размером шрифта.

CSS

div{
    background-color: green;
    font-size: 20px;
    font-family: 'Segoe UI', 'Verdana', 'Arial';
}