Как выровнять по высоте?

Question

[DrunkMaster]

Пример https://jsfiddle.net/9g4j32mp/
Хочу X и Y выровнять по центру внутри блока. Почитал про свойство vertical-align вроде бы правильно делаю.
1) Применяю к элементу а не к блоку в котором он
2) Элемент должен быть строчным или имитировать строку (тут как раз inline-block)
Но что-то я упускаю...

HTML

<div class="buttons">
		<div class="butt">
			<i class="va">X</i>
		</div>
		<div class="butt">
			<i class="va">Y</i>
		</div>
	</div>

CSS

.butt{
    display: inline-block;
    width: 4rem;
    height: 4rem;
    border: 1px solid green;
    border-radius: 0.2rem;
    text-align: center;
}

.va{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}

Answer 1

[0xD34F]

Можно так.

Или так.

Comments

[DrunkMaster]

А, эта штука работает только когда высота блока указана? В первом случае line-height забыл

Answer 2

[Павел]

howtocenterincss.com

Comments

[DrunkMaster]

Он мне позор какой-то сгенерировал:

<div style="display:table;">
  <div style="display:table-cell;vertical-align:middle;">
    <div style="text-align:center;height:15px;font-size:15px;">Text Content</div>
  </div>
</div>

[Павел]

DrunkMaster, все правильно , в зависимости от поддерживаемых браузеров , показано как нужно организовать обертку вокруг того что надо выровнять

Какой у вас вопрос?

Answer 3

[Ankhena]

https://jsfiddle.net/jnf7cxp6/

Answer 4

[Павел Антонов]

https://jsfiddle.net/qgkfc0fe/

добавил before у .butt

Comments

[DrunkMaster]

Неплохо, но мудрёно слишком ))

Answer 5

[Никита]

Самый простой способ это у класса butt поставить line-height: 4rem; (т.е) Равный высота блока

Посложнее: .butt делаем relative, .va absolute, делаем top, left по -50% и transforam: translate(-50%,-50%)