Как выровнять текст внутри <span> после <button>

Question

Как выровнять текст внутри <span> после <button>

0

У меня есть следующий HTML:

<div class="xxx float-left">
   <button class="small">X</button>
   <button class="small">Y</button>
   <button class="small">Z</button>
   <span>xx</span>
</div>

Здесь CSS, который применялся к ним:

.xxx {
   line-height: 2.5rem;
}
button.small {
   font-size: 1.4rem;
   margin: 0 0.2rem;
   padding: 0.3rem 0.8rem;
   float: left;
}
.xxx span {
   line-height: 2.5rem;
}

Я бы хотел, чтобы текст <span> был выровнен по середине по вертикали, но сейчас он отображается вверху. Есть ли способ, которым я могу сделать текст xx с помощью ярлыков button?

Melina 22 окт. 2013, в 16:06

Источник

5

Выглядит вертикально по центру для меня jsfiddle.net/j08691/593wP
j08691 22 окт. 2013, в 13:46
0

Ага. Вертикально по центру и здесь. jsfiddle.net/j08691/593wP
Jacques Snyman 22 окт. 2013, в 13:57
0

jsfiddle.net/AH3Hd/11
Dinesh Kanivu 22 окт. 2013, в 14:04

Показать ещё 1 комментарий

Теги:

html

css

2 ответа

1

Оффлайн я бы не использовал поплавки.

Для этого был построен Inline-block:

Демо-версия JSFiddle

button.small {
    display:inline-block;
    vertical-align:middle;
}
.xxx span {
    display:inline-block;
    vertical-align:middle;
}

Paulie_D 22 окт. 2013, в 11:14

Ещё вопросы

Выглядит вертикально по центру для меня jsfiddle.net/j08691/593wP
Ага. Вертикально по центру и здесь. jsfiddle.net/j08691/593wP

Gobo · Accepted Answer · 2013-10-22T12-20-00.000Z

Chrome и Firefox выглядели вертикально. Для меня IE предоставил его, как вы описали. Я изменился:

.xxx {
   line-height: 2.5rem;
}

к этому:

.xxx {
   line-height: 2rem;
}