如何使用 CSS 網格將最後一行左對齊的框置中？-css教學-PHP中文網

如何使用 CSS 網格將最後一行左對齊的框置中？

Barbara Streisand

發布： 2024-12-20 07:45:09

原創

281 人瀏覽過

How Can I Center a Box with Left-Aligned Last Row Using CSS Grid?

居中對齊並左對齊最後一行

此查詢解決了在容器內對齊框的挑戰，水平居中但與最後一行對齊行向左對齊。關鍵問題是，典型的 ul 元素往往會根據其內容來調整寬度，而不會留下手動調整的空間。

為了解決這個問題，我們可以利用 CSS 網格，它可以更好地控制元素的放置。這是更新的 CSS 和 HTML 程式碼片段：

div {
  padding: 20px;
  width: 200px;
  border: 1px solid;
  overflow: hidden;
  resize: horizontal;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, 40px); /* width of elements here */
  grid-auto-rows: 40px; /* height here */
  grid-gap: 4px;
  justify-content: center; /* this will do the magic */
}

ul li {
  background-color: wheat;
}

登入後複製

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

登入後複製

透過加入 justify-content: center;對於 ul 元素，我們將內容向中心移動。但是，我們保持最後一行左對齊，這是 CSS 網格的固有屬性。

要調整元素的寬度和高度，請修改 grid-template-columns 和 grid-auto- 中的值行。調整 div 的 padding 和 width 屬性以滿足您的設計要求。

透過利用 CSS 網格的靈活性，我們可以實現動態內容對齊，而無需依賴手動調整或腳本。

以上是如何使用 CSS 網格將最後一行左對齊的框置中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！