Zentrieren Sie in HTML ein Element und richten Sie andere Flexbox-Elemente rechts/links aus-HTML-Tutorial-php.cn

Zentrieren Sie in HTML ein Element und richten Sie andere Flexbox-Elemente rechts/links aus

WBOY

Freigeben： 2023-09-04 10:25:06

nach vorne

1130 Leute haben es durchsucht

Zentrieren Sie in HTML ein Element und richten Sie andere Flexbox-Elemente rechts/links aus

Nehmen wir an, wir haben P, Q, R, S, T in der Mitte einer Webseite ausgerichtet −

                                P Q R S T

Nach dem Login kopieren

Wir möchten, dass das Obige gleich bleibt, außer dass sich das ganz rechte, d. h. T, nach rechts bewegt, so −

                                 P Q R S                                 T

Nach dem Login kopieren

Schauen wir uns nun einige Beispiele an, um das umzusetzen, was wir oben gesehen haben.

Eins zentrieren und das andere Flexbox-Element rechts/links mit automatischen Rändern ausrichten

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

Das obige Layout kann auf einer Webseite durch die Verwendung automatischer Ränder und eines neuen, unsichtbaren Flex-Elements erreicht werden −

<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>

Nach dem Login kopieren

Eins zentrieren und das andere Flexbox-Element rechts/links am Pseudoelement ausrichten

In diesem Beispiel verwenden wir ein Pseudoelement mit der gleichen Breite wie T. Verwenden Sie ::before, um es am Anfang des Containers zu platzieren.

Die chinesische Übersetzung von

Beispiel

lautet:

Beispiel

Schauen wir uns jetzt ein Beispiel an −

<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>

Nach dem Login kopieren

Zentrieren Sie eins und richten Sie das andere Flexbox-Element rechts/links mit dem Rasterlayout aus

Erstellen Sie in diesem Beispiel ein Raster mit mehreren Spalten und positionieren Sie dann Ihre Elemente in der Mittel- und Endspalte.

<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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonZentrieren Sie in HTML ein Element und richten Sie andere Flexbox-Elemente rechts/links aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!