html - 如何在以下内容中排列文本

Question

我有以下 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标签对齐？

Answer 1

副手我不会使用花车。

Inline-block为此而建：

JSFiddle 演示

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

Answer 2

Chrome 和 Firefox 看起来是垂直对齐的。对我来说，IE 按照你的描述渲染了它。我变了：

.xxx {
   line-height: 2.5rem;
}

对此：

.xxx {
   line-height: 2rem;
}