CSS自適應布局實現子元素項目整體居中，內部項目左對齊

2024-07-11 09:00:15

字體：大中小

來源：轉載

供稿：網友

日常工作時，我們可能遇到這樣一個布局：一個父元素框框（隨著瀏覽器大小自適應寬度）里面有許多按鈕，然后這些按鈕（寬度固定）的整體需要在父元素內居中對齊，而按鈕整體的內容又是從左往右排列。這里提供一個解決方法，示例如下：

有如下代碼：

<div class="wrap">    <button class="btn">1</button>    <button class="btn">2</button>    <button class="btn">3</button>    <button class="btn">4</button>    <button class="btn">5</button>    <button class="btn">6</button>    <button class="btn">7</button></div>

對應的CSS為：

.wrap {    border: 2px solid black;    margin: 0 auto;    padding: 10px;    width: 40%;}.btn {    outline: none;    border: none;    width: 180px;    height: 30px;    background-color: cornflowerblue;    margin: 5px;}

顯示的效果：

顯示的效果1

動態變化寬度的情況：

寬度變化1

可以看到，當我們縮小瀏覽器窗口大小時，父元素（黑框）的寬度會動態調整，其子元素也會根據父元素的寬度動態排列，但是按鈕組在父容器中是左對齊的，我們想要讓這個整體保持居中，可以通過如下方式實現：

CSS代碼：

.wrap {    border: 2px solid black;    margin: 0 auto;    padding: 10px;    width: 40%;    display: grid;    grid-template-columns: repeat(auto-fill, 200px);    justify-content: center;}.btn {    outline: none;    border: none;    width: 180px;    height: 30px;    background-color: cornflowerblue;    margin: 5px;}

將父元素display屬性設置為grid，然后grid列模板為自動填充，寬度為200px（這里寬度比單個按鈕元素稍大一點即可），然后設置justify-content屬性值為center使內容水平居中。效果如下：

顯示效果2