無需flex布局，也能輕松實現左側固定按鈕和中間內容的完美對齊！本文將介紹一種基于position、text-align和inline-block的css技巧，有效解決子元素居中問題，即使在右側添加其他元素，也能保持布局穩(wěn)定。
文中提到了一種使用flex布局和絕對定位的方案，但我們這里探索一種更簡潔高效的替代方法。
以下CSS代碼演示了如何利用這些屬性實現子元素居中：
body { margin: 0; } .row { position: relative; text-align: center; line-height: 4; background-color: #f0f0f0; } .row .item { display: inline-block; margin: 0 auto; padding: 0 0.5em; background-color: #ccc; } .row .nav { position: absolute; left: 0; top: 50%; line-height: 2; padding: 0 0.5em; box-shadow: 0 0 0 1px red inset; transform: translateY(-50%); } .row .nav.nav-left { left: 0; }
對應的html結構如下：
立即學習“前端免費學習筆記（深入）”；
<div class="row"> <div class="item">一二三四五</div> <div class="nav nav-left">nav</div> </div>
代碼解析：.row作為父元素，text-align: center使其子元素水平居中；.item使用display: inline-block和margin: 0 auto實現水平居中；左側導航按鈕.nav使用絕對定位，top: 50%和transform: translateY(-50%)使其垂直居中，left: 0固定其位置。 line-height屬性用于垂直對齊。這種方法巧妙地結合了相對定位和絕對定位，即使右側添加更多元素，左側按鈕和中間內容也能保持居中。
? 版權聲明
文章版權歸作者所有，未經允許請勿轉載。
THE END
