Как я могу смешивать элементы с вертикальным центром с разными размерами шрифтов и сохранять постоянную высоту линии?

Ответ 1

§10.8 объясняет, как вычисляется высота строк:

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

• Вычисляется высота каждого окна встроенного уровня в поле строки. [...] Для встроенных ящиков это их "линия-высота"

  Так как .smaller наследует line-height: 20px и является встроенным блоком (т.е. не заменяется на display: inline), его высота равна 20px

• Ящики линейного уровня выровнены по вертикали в соответствии с их 'vertical-align' свойство.

  .smaller имеет vertical-align : middle, что означает

  Совместите вертикальную середину поля с базовым уровнем родительского элемента box плюс половина x-height родителя.

• Высота линейного окна - это расстояние между верхней крышкой и нижнее нижнее ядро.

Таким образом, текст и .smaller имеют высоту 20px, но они имеют разное выравнивание. Поэтому строка строки растет:

Затем, как объясняют другие ответы, способ решения проблемы заключается в сокращении .smaller line-height:

Однако существует альтернативное решение без изменения line-height: можно добавить отрицательные поля, чтобы предотвратить .smaller увеличения высоты строки строки.

Как указано выше, высота встроенного блока - это line-height, поэтому для того, чтобы сделать поля, требуется также display: inline-block:

Вычисляется высота каждого окна встроенного уровня в поле строки. Для [...] элементы встроенного блока [...] - это высота их поля коробка.

Обратите внимание, что это решение не нарушит выравнивание, потому что поскольку .smaller имеет vartical-align: middle, если мы используем ту же сумму в margin-top и margin-bottom, она останется центрированной.

Подводя итог, вы можете использовать этот код:

.smaller {
    vertical-align: middle;
    display: inline-block;
    margin: -1em 0;
}

body {
  line-height: 20px;
  font-size: 14px;
}
.smaller {
  font-size: 0.9em;
  vertical-align: middle;
  display: inline-block;
  margin: -1em 0;
}

<div class="body">
  <div class="why-not-twenty-px">
    nor<span class="smaller">&bull;</span>mal
  </div>
  <div class="why-not-sixty-px">
    multiline multiline multiline multiline multiline multiline <span class="smaller">&bull;</span> multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline
    multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline
  </div>
</div>

Ответ 2

Вы можете исправить это, сделав line-height относительно font-size вместо фиксированного.

body {
    line-height: 1.4285;
    font-size: 14px;
}

исправит проблему дополнительных пикселей в контейнерах.

Демо на http://jsfiddle.net/gaby/b5zgpktj/

Чтобы воздействовать только на элемент .smaller, вы можете дать ему line-height из 1

.smaller
{
    line-height:1;
    font-size: 0.9em;
    vertical-align:middle;
}

Демо на http://jsfiddle.net/gaby/b5zgpktj/1/

Ответ 3

Поместите line-height: 100% или line-height: 1 (preffered) в элемент .smaller. Кроме того, если вы помещаете vertical-align: top или vertical-align: bottom без изменения контейнеров с высотой линии, это будет 20px и 60px.

Сделав высоту линии, вычисленную из фактического размера шрифта или обеспечив выравнивание элемента top/bottom с родителем, высота остается одинаковой (это предполагает, что ваш дочерний элемент всегда имеет меньший размер шрифта, чем родительский). В противном случае вы наследуете фиксированную высоту линии 20px, которая добавляет родительскую общую высоту, когда родительский и дочерний поля не выровнены (это происходит, когда размер шрифта отличается, а выравнивание по вертикали - это ничего, кроме верхнего/нижнего, включая middle или default baseline значение).

body {
  line-height: 20px;
  font-size: 14px;
}
.smaller {
  font-size: 0.9em;
  line-height: 1 // or 100% 
  vertical-align: middle;

}

<div class="body">
  <div class="why-not-twenty-px">
    containing div has height <span class="smaller">&bull;</span> of 21px, not 20px
  </div>
  <div class="why-not-sixty-px">
    containing div has height of 61 px, not 60px multiline multiline multiline multiline multiline multiline <span class="smaller">&bull;</span> multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline
  </div>
</div>

Ответ 4

Контейнер div принимает высоту 21px, потому что элемент span.smaller имеет высоту строки 20px. Братья и сестры элемента span также имеют высоту линии 20px. Вам нужно понять, что свойство line-height используется при вычислении свойства vertical-align. Теперь, если вы хотите применить "vertical-align: middle" к span.smaller, измените его высоту линии на что-то меньшее, чем высота линии братья и сестры, т.е. 20px, иначе она попытается центрировать элемент span.smaller относительно его братьев и сестер. Так как длина линии span.smaller также равно 20px, это приведет к увеличению высоты контейнера.

Например

    <div class="body">
 <div class="why-not-twenty-px">
    containing div has height 
     <span class="smaller"> &bull;</span> 
     of 21px, not 20px
  </div>
<div class="abcd">
    <span>The same problem can </span>
    <span style="vertical-align:middle;color:grey;"> be             replicated </span> 
    <span> while using tags with same font-size and line-height, height will be 21px</span>
  </div>
<div class="why-not-sixty-px">
containing div has height of 61 px, not 60px multiline multiline multiline multiline multiline multiline <span class="smaller">&bull;</span> multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline multiline

CSS

    body
    {
        line-height: 20px;
        font-size: 14px;
    }
    .smaller
    {
        font-size: 12px;/*I prefer to use px over em, same as 0.9em*/
        vertical-align: middle;
        line-height: 12px;/*use any smaller line height compared to         siblings*/
    }
    .abcd span{
        text-decoration: underline;
    }

ИЛИ Пожалуйста, перейдите по этой ссылке https://jsfiddle.net/osha90/meeLL0u9/4/

Ответ 5

line-height: 1em;

добавьте этот стиль в .smaller, и пуля получит вертикальное выравнивание по центру.