DrunkMaster
@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;
}
  • Вопрос задан
  • 158 просмотров
Решения вопроса 5
0xD34F
@0xD34F Куратор тега CSS
mrusklon
@mrusklon
Не получается? Яростно гугли!
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Ответ написан
Комментировать
freislot
@freislot
Frontend-разработчик
Rema1ns
@Rema1ns
и так сойдет
Самый простой способ это у класса butt поставить line-height: 4rem; (т.е) Равный высота блока

Посложнее: .butt делаем relative, .va absolute, делаем top, left по -50% и transforam: translate(-50%,-50%)
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы