CSS вертикальное центрирование текста. Почему это так несовместимо? начало

Давайте из этого ответа: Is it possible to vertically align text within a div?CSS вертикальное центрирование текста. Почему это так несовместимо? начало

Существует CSS-свойство, которое называется vertical-align и другой, который называется line-height я бы ожидать, что если я ставлю текст внутри элемента (Div, пядь, р) и это элемент установил свойство vertical-align: middle, будет вычисляться высота отображаемого текста, высота отображаемого элемента контейнера, а текст будет центрироваться по вертикали внутри элемента контейнера.

Но согласно ответу, кажется, не работает таким образом:

, который из-за высоту строки. Если вы добавляете высоту к элементу, где точно содержит текст внутри него? То есть, если у вас есть блок текста, размер шрифта: 10 пикселей (теоретическая высота: 10 пикселей) внутри контейнера , который составляет 60 пикселей, где именно текст будет в конечном итоге? Большинство , конечно, в верхней части контейнера, так как текст может только позиция сами, где текст течет, внутри высоту: 10px пространство

Я не понимаю этого. Высота линии должна влиять на расстояние между двумя линиями. Он должен работать как своего рода margin-top, применяемый к каждой букве текста. Интуитивно я ожидал бы, что вертикальное выравнивание сильнее, чем «маржа».

Как я могу понять, почему поведение вертикального выравнивания не является вертикальным выравниванием элементов, как ожидалось? Почему этот выбор создателями CSS?

#column-content { 
 
     display: inline-block; 
 
     border: 1px solid red; 
 
     position: relative; 
 
    } 
 
    #column-content strong { 
 
     color: #592102; 
 
     font-size: 18px; 
 
    } 
 
    img { 
 
     margin-top: -7px; 
 
     vertical-align: middle; 
 
    } 
 
    span { 
 
     display: inline-block; 
 
     vertical-align: middle 
 
    }

<div id="column-content"> 
 

 
    <img src="http://i.imgur.com/WxW4B.png"> 
 
    <span><strong>1234</strong> 
 
    yet another text content that should be centered vertically</span> 
 
</div>

источник

2014-10-02 Revious

браузер просматривает пиксели слева вверху слева, поэтому он не может вертикально центрировать что-то, потому что пиксели, которые будут над текстом, вычисляются перед самим текстом, если это имеет смысл. Я не знаю если это вам поможет. –

@Goosebumbs: Я не уверен, что понял.Я понял, что по соображениям эффективности браузер использует алгоритм, который вычисляет высоту над текстом, прежде чем вычислять высоту самого div и высоту текста .. и, следовательно, приводит к систематической ошибке, которая усложняет жизнь разработчики .. – Revious

'vertical-align' не предназначен для компоновки текста. Он предназначен для вертикального выравнивания элементов с родителями. Таким образом, это противоречит интуиции, потому что вы ожидаете, что он сделает то, что он не предназначен. Например, если я ожидал, что правило цвета будет устанавливать цвет фона div вместо установки цвета текста в div. http://phrogz.net/css/vertical-align/index.html – Anthony

-2

Я должен поблагодарить Энтони и Alohci за комментарий. Я бы принял их, если бы они были ответами.

цитируемой ссылки дают очень хорошее объяснение причин, почему вертикальные выравнивания, похоже, не работает, как ожидалось:

Короче говоря, причина в том, что вертикальная -align имеет два разных поведения:

vertical-alig п в ячейках таблицы
вертикального выравнивания на встроенных элементах

Во всех остальных элементов это полностью игнорировались.

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

источник

2014-10-02 10:53:53 Revious

CSS вертикальное центрирование текста. Почему это так несовместимо? начало

ответ

Смежные вопросы