內容首發于工粽號:程序員大澈,每日分享一段優質代碼片段,歡迎關注和投稿!
大家好,我是大澈!
本文約 500+ 字,整篇閱讀約需 1 分鐘。
今天分享一段優質 CSS 代碼片段,可以輕松實現元素垂直水平居中對齊。
老規矩,先閱讀代碼片段并思考,再看代碼解析再思考,最后評論區留下你的見解!
div {
display: grid;
place-content: center;
}
分享原因
這段代碼展示了如何使用 CSS Grid 布局以及 place-content 屬性來居中對齊元素。
CSS Grid 是一種強大的布局工具,提供了簡單且靈活的方式來實現復雜的布局,而place-content 屬性進一步簡化了居中對齊的實現。
相較于 Flex 布局,Grid 布局僅僅只需一行代碼即可搞定居中對齊!
代碼解析
1. display: grid;
設置元素為網格容器。
網格容器可以通過定義網格行和列來布置其子元素。
2. place-content: center;
place-content 是 align-content 和 justify-content 的組合屬性。
center 值表示內容在容器的中央對齊。
3. 兼容性
place-content: center; 的兼容性在現代瀏覽器中較好,某一些舊版瀏覽器的不兼容完全可以忽略了。
以下是一些常見瀏覽器的具體支持情況:
TML ul li 橫排居中排列的方法,三步驟及實例
無序列表的列表項默認情況下是豎著排的,因為li元素是塊級元素,會自動分行。那如果要將列表的列表項進行橫排,比用無序列表ul元素定義一個導航條。那該怎么辦呢?這當中有三個應當被解決的東西,一個是橫排本身,另一個就是應當把無序列表項的圓點去掉,第三則是讓ul定義的列表居中顯示,包括水平居中和垂直居中。方法如下:
HTML ul li 橫排居中排列的方法,三步驟及實例
將ul無序列表元素中的列表項li元素的display屬性設置成inline或inline-block,個人比較常用的是后者:
ul li{display:inline-block;}
水平居中方法:只要將ul元素包含于一個div元素,并將div元素的text-align屬性設置為center即可將ul水平居中。除此之外,因為ul的列表默認情況下是有左內邊距的,所以,為了能夠讓列表能夠更好地水平居中,需要將ul的左內邊距padding-left設置為0,具體可見下方的綜合實例。
垂直居中方法:為包含ul元素的div元素設置寬度width和高度height(實際上導航條一般也需要有寬度和高度的設置),然后將ul的line-height屬性設置為父元素的高度height即可。
將ul元素的list-style屬性設置為none即可。
HTML ul li 橫排居中排列的方法,三步驟及實例
<div class='e1'>
<ul class='e2'>
<li>HTML</li>
<li>python</li>
<li>golang</li>
</ul>
</div>
<style>
.e1{width:100%;height:50px;border:1px solid skyblue;text-align:center;}
.e2{list-style:none;padding-left:0%;}
.e2 li{line-height:50px;display:inline-block;}
</style>
HTML ul li 橫排居中排列的方法,綜合實例在線 - HTML教程
如上代碼,一定要將ul的左內邊距padding-left設置為0,否則ul列表的“水平居中”將偏向右邊,大家可以將.e2中的padding-left刪除掉,然后再在線運行看一看效果。
笨鳥工具-璞玉天成,大器晚成
<div id="parent">
<!-- 定義子級元素 -->
<div id="child">居中布局</div>
</div>
過以下CSS樣式代碼實現水平方向居中布局效果
.parent{text-align:center;}
.child{display:inline-block;}
優點:
瀏覽器兼容性比較好
缺點:
text-align 屬性具有繼承性, 導致子級元素的文本也是居中顯示的
*請認真填寫需求信息,我們會在24小時內與您取得聯系。