CSS 그리드의 마지막 행에 요소를 수직으로 가운데 정렬하는 방법은 무엇입니까?
P粉520204081
2023-08-22 15:57:06
<p>CSS 그리드를 사용하여 다음과 같이 일부 항목을 배치하고 있습니다...</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">#container {
디스플레이: 그리드;
그리드 템플릿 열: 16.666% 16.666% 16.666% 16.666% 16.666% 16.666%;
}
.안건 {
배경: 청록색;
색상: 흰색;
패딩: 20px;
여백: 10px;
}</pre>
<pre class="brush:html;toolbar:false;"><div id="container">
<div class="item">항목</div>
<div class="item">항목</div>
<div class="item">항목</div>
<div class="item">항목</div>
<div class="item">항목</div>
<div class="item">항목</div>
<div class="item">항목</div>
<div class="item">항목</div>
<div class="item">항목</div>
<div class="item">항목</div>
<div class="item">항목</div>
<div class="item">항목</div>
<div class="item">항목</div>
<div class="item">항목</div>
<div class="item">항목</div>
<div class="item">항목</div>
<p><br /></p>
<p>마지막 행을 왼쪽 정렬 대신 가운데 정렬로 만들려면 어떻게 해야 하나요? 항목 수를 보장할 수 없으므로 레이아웃이 항목 수에 관계없이 작동할 수 있기를 바랍니다. </p>
<p>이것이 제가 Flexbox를 사용해야 하는 것인가요? 아니면 CSS 그리드를 사용하기에 적합합니까? </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
이 문서에서 의사 선택기를 사용하여 남은 그리드 항목을 제어하는 방법에 대한 훌륭한 방법을 찾았습니다. 의사 선택기로 남은 그리드 항목 제어
CSS 그리드는 교차하는 레일이 방해가 되므로 전체 행에 걸쳐 정렬하는 데 적합하지 않습니다. 자세한 설명은 다음과 같습니다.
또는 flexbox를 사용하고
justify-content: center를 설정하세요.이렇게 하면 행의 가로 중앙에 모든 항목이 포장됩니다. 그러면 여백이 분리됩니다.
완전히 채워진 행에서는
여유 공간이 있는 행(귀하의 경우 마지막 행)에서는 항목이 중앙에 표시됩니다.justify-content작동할 여유 공간이 없기 때문에 작동하지 않습니다.