CSS自適應(yīng)布局實(shí)現(xiàn)子元素項目整體居中，內(nèi)部項目左對齊
我要評論日常工作時，我們可能遇到這樣一個布局：一個父元素框框（隨著瀏覽器大小自適應(yīng)寬度）里面有許多按鈕，然后這些按鈕（寬度固定）的整體需要在父元素內(nèi)居中對齊，而按鈕整體的內(nèi)容又是從左往右排列。這里提供一個解決方法，示例如下：
有如下代碼：
<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>
對應(yīng)的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;
}
顯示的效果：
動態(tài)變化寬度的情況：
可以看到，當(dāng)我們縮小瀏覽器窗口大小時，父元素（黑框）的寬度會動態(tài)調(diào)整，其子元素也會根據(jù)父元素的寬度動態(tài)排列，但是按鈕組在父容器中是左對齊的，我們想要讓這個整體保持居中，可以通過如下方式實(shí)現(xiàn)：
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屬性設(shè)置為grid，然后grid列模板為自動填充，寬度為200px（這里寬度比單個按鈕元素稍大一點(diǎn)即可），然后設(shè)置justify-content屬性值為center使內(nèi)容水平居中。效果如下：
動態(tài)變化的效果：
可以看到，在寬度變化的過程中，子元素整體一直是保持居中的。
單純用CSS實(shí)現(xiàn)這樣的效果，我只想到用grid來實(shí)現(xiàn)了，若你有其他方法，歡迎留言，一同學(xué)習(xí)~
提示：grid目前的兼容性不是很好，如果需要支持較老的瀏覽器版本，慎用哦！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了css實(shí)現(xiàn)元素居中的N種方法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
這篇文章主要介紹了css實(shí)現(xiàn)元素垂直居中顯示的7種方式,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)2020-09-04CSS實(shí)現(xiàn)子元素div水平垂直居中的示例
這篇文章主要介紹了CSS實(shí)現(xiàn)子元素div水平垂直居中的示例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起2020-09-03
這篇文章主要介紹了css 不定寬高的元素居中布局解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起2019-09-18- 這篇文章主要介紹了css常用元素水平垂直居中方案,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2019-08-09
css實(shí)現(xiàn)元素垂直居中的常用方法(總結(jié))
本文給大家分享幾種方法介紹css實(shí)現(xiàn)元素垂直居中的常用方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-01- 在 CSS 中要設(shè)置元素水平垂直居中是一個非常常見的需求了。這篇文章主要介紹了CSS實(shí)現(xiàn)元素居中原理解析，本文分別從行內(nèi)元素和塊級元素進(jìn)行說明，具有一定的參考價值，感興2018-10-18
- 作為前端攻城師，在制作Web頁面時都有碰到CSS制作水平垂直居中，我想大家都有研究過或者寫過，特別的其中的垂直居中，更是讓人煩惱，下面這篇文章主要給大家匯總介紹了關(guān)于2017-09-12
css實(shí)現(xiàn)元素水平垂直居中常見的兩種方式實(shí)例詳解
這篇文章主要給大家介紹了css實(shí)現(xiàn)元素水平垂直居中的兩種方式，文中給出了完整的示例代碼供大家參考學(xué)習(xí)，對大家的學(xué)習(xí)或者工作具有一定的參考價值，有需要的朋友們下面來2017-04-23關(guān)于css 行元素和塊元素 相互轉(zhuǎn)換 居中
下面小編就為大家?guī)硪黄P(guān)于css 行元素和塊元素 相互轉(zhuǎn)換 居中。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-05
