Почему не работает vertical-align?

Question

Все отлично равняется, если я задаю это свойство для всего p, но все перестает работать, когда я пытаюсь задать это же свойство для отдельного слова. Это значение, как видно, я задаю "Я", но это не работает.

В чем проблема?

body {
  font-family: sans-serif;
}

p {
  display: table-cell;
  background: yellow;
  width: 200px;
  height: 100px;
  vertical-align: baseline;
  line-height: 50px;
}

.one {
  vertical-align: top;
}

<div>
  <p>
    <span class="one">Я</span>
    <span class="2">на</span>
    <span class="3">желтом</span> фоне
  </p>
</div>

Answer 1

Для того что бы заработала Ваша реализация родителю нужно задать свойство display со значением table, а детям table-cell:

p {
  display: table;
  background-color: yellow;
  width: 200px;
  height: 100px;
  line-height: 1;
  margin: 0;
}

p > span {
  display: table-cell;
}

.one {
  vertical-align: middle;
}

.two {
  vertical-align: top;
}

.three {
  vertical-align: bottom;
}

<p>
  <span class="one">middle</span>
  <span class="two">top</span> 
  <span class="three">bottom</span> 
</p>

Так же отдельно отмечу что имена классов, по конвенции, не могут начинаться с цифр.

БЛОГ НА HUSL

Почему не работает vertical-align?

Ответы (1 шт):