如何在<button> </button> </span>后面的<span>内排列文本

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

Offhand我不会使用花车。

Inline-block就是为此而建的：

JSFiddle Demo

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;
}