在HTML中,將一個元素置中並將其他彈性盒子元素右/左對齊

WBOY
發布: 2023-09-04 10:25:06
轉載
1124 人瀏覽過

在HTML中,將一個元素置中並將其他彈性盒子元素右/左對齊

Let’s say we have P, Q,R,S,T aligned in the center of a web page −

#
                                P Q R S T 
登入後複製

我們希望上述內容不變,除了最右邊的即T向右移動,像這樣−

                                 P Q R S                                 T 
登入後複製

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

Center one and right/ left align other flexbox element with auto margins

Example

的中文翻譯為:

範例

透過使用自動邊距和一個新的、不可見的 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>
登入後複製

Center one and right/ left align other flexbox element with pseudo element

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

Example

的中文翻譯為:

範例

現在讓我們來看一個例子−

<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> 
登入後複製

Center one and right/ left align other flexbox element with Grid Layout

In this example, create a grid with multiple columns. Then position your items in the middle and end columns.

Example

的中文翻譯為:

讓我們現在來看一個例子−

#
<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> 
登入後複製

以上是在HTML中,將一個元素置中並將其他彈性盒子元素右/左對齊的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:tutorialspoint.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板