如何將文本與其他元素垂直居中對齊？

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>