如何在< span>在< button>之后 [英] How can I line up the text inside a <span> following a <button>

问题描述

我有以下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:

Here's the CSS that's applied to these:

.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 标签对齐?

I would like the <span> text to be lined up in the middle vertically but right now it appears at the top. Is there a way that I can make the xx text line up with the button labels?

推荐答案

Chrome和Firefox垂直对齐.对我来说，IE就像您描述的那样呈现它.我改变了:

Chrome and Firefox looked vertically aligned. For me, IE rendered it as you described. I changed:

.xxx {
   line-height: 2.5rem;
}

对此:

.xxx {
   line-height: 2rem;
}

这篇关于如何在< span>在< button>之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！