在 CSS 中处理网格时，如何垂直对齐对象？
CSS 网格布局是 CSS 最强的布局之一。网格布局是二维的，这意味着它可以处理行和列，不像 flexbox 是一维的。要对齐对象，请将 CSS 应用于成为网格容器的父元素和成为网格中项目的子元素。
方法: 使用 CSS 网格的对齐内容属性垂直对齐对象。
语法:
align-content: center;
例 1:
<!DOCTYPE html>
<html>
<head>
<style>
.gfg {
display: grid;
/* display is set to grid layout */
height: 400px;
align-content: center;
/* vertically aligns objects to the center */
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #4dd599;
/* background colour is set */
padding: 10px;
}
.gfg > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
/* text inside the container is set to center */
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="gfg">
<div>Welcome</div>
<div>to</div>
<div>Geeks</div>
<div>for</div>
<div>Geeks</div>
<div>Start</div>
</div>
</body>
</html>
输出:
例 2:
<!DOCTYPE html>
<html>
<head>
<style>
.gfg {
display: grid;
/* display is set to grid layout */
height: 400px;
align-content: center;
/* vertically aligns objects to the center */
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #f67280;
/* background colour is set */
padding: 10px;
}
.gfg > div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
/* text inside the container is set to center */
padding: 20px 0;
font-size: 30px;
}
</style>
</head>
<body>
<div class="gfg">
<div>Explore</div>
<div>the</div>
<div>world</div>
<div>travel</div>
<div>and</div>
<div>eat</div>
</div>
</body>
</html>
输出:
版权属于：月萌API www.moonapi.com，转载请注明出处
