在HTML中居中一個flexbox元素並左/右對齊其他flexbox元素

假設我們有P、Q、R、S、T在網頁中央對齊 -

                                P Q R S T

我們希望保持上述狀態不變，只是最右邊的T移到右邊，像這樣 -

                                 P Q R S                                 T

現在讓我們看一些例子來實現上面看到的。

使用自動邊距居中一個flexbox元素並左/右對齊其他flexbox元素

示例

透過結合自動邊距和一個新的不可見的flex專案，可以在網頁上實現上述佈局 -

<html>
<title>Example</title>
<head>
   <style>
      li:first-child {
         margin-right: auto;
         visibility: hidden;
      }
      li:last-child {
         margin-left: auto;
         background: orange;
      }
      ul {
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;
      }
      li {
         display: flex;
         margin: 3px;
         padding: 10px;
         background: red;
      }
      p {
         text-align: center;
         margin-top: 0;
      }
   </style>
<head>
<body>
   <ul>
      <li>T</li>
      <li>P</li>
      <li>Q</li>
      <li>R</li>
      <li>S</li>
      <li>T</li>
   </ul>
</body>
<html>

使用偽元素居中一個flexbox元素並左/右對齊其他flexbox元素

在這個例子中，我們將建立一個與T寬度相同的偽元素。使用::before將其放置在容器的開頭。

示例

現在讓我們看一個例子 -

<html>
<title>Example</title>
<head>
   <style>
      ul::before {
         content: "T";
         margin: 1px auto 1px 1px;
         visibility: hidden;
         padding: 5px;
         background: orange;
      }
      li:last-child {
         margin-left: auto;
         background: orange;
      }
      ul {
         padding: 0;
         margin: 0;
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;
      }
      li {
         display: flex;
         margin: 3px;
         padding: 10px;
         background: red;
      }
   </style>
<head>
<body>
   <ul>
      <li>P</li>
      <li>Q</li>
      <li>R</li>
      <li>S</li>
      <li>T</li>
   </ul>
</body>
<html>

使用網格佈局居中一個flexbox元素並左/右對齊其他flexbox元素

在這個例子中，建立一個包含多個列的網格。然後將你的專案放置在中間和末尾的列中。

示例

現在讓我們看一個例子 -

<html>
<title>Example</title>
<head>
   <style>
      ul {
         display: grid;
         grid-template-columns: 1fr repeat(4, auto) 1fr;
         grid-column-gap: 5px;
         justify-items: center;
      }
      li:nth-child(1) {
         grid-column-start: 2;
      }
      li:nth-child(5) {
         margin-left: auto;
      }
      ul {
         padding: 0;
         margin: 0;
         list-style: none;
      }
      li {
         padding: 10px;
         background: red;
      }
      p {
         text-align: center;
      }
   </style>
<head>
<body>
   <ul>
      <li>P</li>
      <li>Q</li>
      <li>R</li>
      <li>S</li>
      <li>T</li>
   </ul>
</body>
<html>

更新於：2022年10月18日

7K+ 次瀏覽

啟動你的職業生涯

完成課程獲得認證

開始學習
廣告
© . All rights reserved.