如何将文本与其他元素垂直居中对齐？

Question

我正在创建当前位于 HTML 表中的对象行作为单独的元素，以便在使页面响应时具有更大的灵活性。 但是，我根本无法让跨度文本元素以状态 div 或按钮为中心。 跨度文本似乎比其他元素具有更大的底部“填充”，对于我来说，我无法弄清楚为什么。

不幸的是，我必须对 alignment 使用浮点数（据我所知），因为该网站必须完全支持 IE10+，否则我会使用类似 flex 的东西。 我在网上查看和研究的大部分内容都处理一行文本另一个元素，许多人建议编辑行高，在我看来这不是这种情况下的最佳解决方案。

所有代码的 codepen 都在这里： https://codepen.io/stevennava/pen/WNrzzKo这是代码（根据 StackOverflow 标准）：

 #outer-border { border: 1px solid black; border-radius: 5px; padding: 1.3em 0; position: relative; } #centered-container { margin: 0; padding: auto; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } #status { position: relative; border: 1px solid lightgrey; border-radius: 8px; padding: 0.2em 0.2em } #status-message { float: left; margin-left: 1.2em; } #status-circle { width: 12px; height: 12px; background-color: orange; border-radius: 50%; float: left; margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } #button { height: 1.5em; width: 1.5em; text-align: center; }.order-element { padding: 0; float: left; margin-left: 15px; }.clearfix { overflow: auto; }.clearfix::after { content: ""; clear: both; display: table; }

 <div id="outer-border" class="clearfix"> <div id="centered-container" class="clearfix"> <span name="user-name" class="order-element">John Smith</span> <div id="status" class="order-element"> <div id="status-circle" class=""></div> <span id="status-message" class="">Complete<span> </div> <div class="clearfix"> <span name="order-number" class="order-element">123456</span> <span name="order-amount" class="order-element">$35.45</span> <span name="fulfillment-date" class="order-element">07/07/2020 07:00 PM</span> <button id="button" class="order-element">...</button> </div> </div>

这就是结果看起来像：

Answer 1

两件事，按钮的高度导致.clearfix div 的高度拉伸， #status上的边框导致它的高度拉伸。

如果您不想完全改变它，您可以添加填充以匹配跨度上边框的厚度，并将按钮高度设置为自动。

 #outer-border { border: 1px solid black; border-radius: 5px; padding: 1.3em 0; position: relative; } #centered-container { margin: 0; padding: auto; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } #status { position: relative; border: 1px solid lightgrey; border-radius: 8px; padding: 0.2em 0.2em } #status-message { float: left; margin-left: 1.2em; } #status-circle { width: 12px; height: 12px; background-color: orange; border-radius: 50%; float: left; margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } #button { height: auto; width: 1.5em; text-align: center; }.order-element { padding: 0; float: left; margin-left: 15px; }.clearfix { overflow: auto; }.clearfix::after { content: ""; clear: both; display: table; }.pad-1 { padding-top: 1px; padding-bottom: 1px; }

 <div id="outer-border" class="clearfix"> <div id="centered-container" class="clearfix"> <span name="user-name" class="order-element pad-1">John Smith</span> <div id="status" class="order-element"> <div id="status-circle" class=""></div> <span id="status-message" class="">Complete<span> </div> <div class="clearfix"> <span name="order-number" class="order-element pad-1">123456</span> <span name="order-amount" class="order-element pad-1">$35.45</span> <span name="fulfillment-date" class="order-element pad-1">07/07/2020 07:00 PM</span> <button id="button" class="order-element">...</button> </div> </div>