Выровнять по вертикали, снова - PullRequest
Новая
       7

Выровнять по вертикали, снова

0 голосов
/ 27 августа 2018

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

p {
  border: 1px solid red;
}

.one {
  font-size: 50px;
}

.two {
  font-size: 30px;
  vertical-align: middle;
}
<p>
  <span class="one">Textx</span>
  <span class="two">-</span>
</p>

Вопрос: середина моего .two элемента середина чего? Всегда ли мне нужно устанавливать вертикальное выравнивание для первого элемента в строке, чтобы это работало правильно? Благодарю.

1 Ответ

0 голосов
/ 28 августа 2018

По существу, vertical-align: middle; выравнивает среднюю точку элемента по parent's baseline + 1/2 parent's height

В вашем случае первый span выравнивается по baseline, поэтому вы не видите никакого эффекта второго выравнивания span. Так что здесь вам нужно указать vertical-align: middle; для первого диапазона. Но если вы хотите выровнять .two, например, по top, для первого диапазона не требуется указывать vertical-align.

В качестве альтернативы вы можете использовать flex-box для выравнивания ваших отрезков: 

p {
  border: 1px solid red;
  
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap; /* if you suppose multiline content */
}

.one {
  font-size: 50px;
}

.two {
  font-size: 30px;
}
<p>
  <span class="one">Textx</span>
  <span class="two">-</span>
</p>

Почему среднее не работает без выравнивания первого элемента

На самом деле это так. Сначала давайте разберемся, как работает середина. Он принимает размер шрифта родительского элемента, базовую строку этого текста, 1/2 (половину) высоты текста и выравнивает элемент по вычисленной точке.

В вашем случае родительский элемент равен p, а font-size равен 16px (здесь по крайней мере). Первый диапазон имеет font-size: 50px. Вы ожидаете, что второй диапазон будет выровнен на основе размера шрифта первого диапазона (50px), но на самом деле он выравнивается по родительскому значению 16px. А так как первый диапазон выровнен по базовой линии (по умолчанию), вы не увидите никакого эффекта для .two. Чтобы проиллюстрировать, что происходит, давайте попробуем добавить текст между интервалами 

p {
  border: 1px solid red;
}

.one {
  font-size: 50px;
}

.two {
  vertical-align: middle;
}
<p>
  <span class="one">Textx</span>
  xxx 
  <span class="two">-</span>
</p>

Вы можете видеть, что второй интервал фактически выровнен по середине общего текста.

Так что правило довольно простое. Если вы хотите выровнять все встроенные элементы по середине, вы должны добавить vertical-align: middle к каждому элементу.

Также вы можете использовать table-cell для родительского элемента (он работает немного по-другому и выравнивает все встроенные элементы внутри) или flex-box, как я показал выше.

...