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

Question

Я использую свойство line-height для выравнивания текста с иконками в меню. Я создал упрощенную версию (без значков), чтобы проиллюстрировать мою проблему. Кажется, что проблема связана с общим вертикальным выравниванием шрифтов.

Вы можете увидеть эту проблему на jsfiddle: http://jsfiddle.net/KFxG3/1/

код очень прост:

<div>qb - Some text - qb</div> 

на добавление стиля:

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

Вот как это выглядит :

И это, как это должно выглядеть:

Почему это происходит в новых браузерах? Я тестировал его на Windows 8.1 64-bit в Firefox 27.0.

EDIT: Я хочу знать, ПОЧЕМУ браузеры не отображаются правильно. Маленькая буква типа «a» должна иметь одинаковое пространство сверху и снизу «зеленого», когда применяется высота линии, высота которой равна размеру контейнера. Но рендеринг ошибочен.

EDIT # 2: Это проблема с шрифтом. У Segoe UI, похоже, странная базовая линия. При использовании Arial, Verdana или любого другого вертикального выравнивания лучше подходит (но это также не идеально). ->http://jsfiddle.net/KFxG3/22/

Answer 1

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

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

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

Answer 2

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

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

Пример:

div{ 
    line-height:16px; 
} 

Answer 3

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

вы должны добавить в ваш CSS

Answer 4

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

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

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

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; 
} 

Fiddle Example

Answer 5

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

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> 

Answer 6

JSFiddle!

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

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

padding-bottom: 5px; 

Answer 7

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

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

CSS

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

Answer 8

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

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

Answer 9

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

Пример:

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

Answer 10

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

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

padding-bottom:5px; 

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

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

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

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

Answer 11

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

a{ 
    box-sizing: content-box 
} 

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

Answer 12

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

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

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

 @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/