Heim > Artikel > Web-Frontend > So zentrieren Sie ein Element horizontal

So zentrieren Sie ein Element horizontal

藏色散人Original: 2020-07-02 10:55:304505Durchsuche

Methoden zum horizontalen Zentrieren eines Elements: 1. Für Inline-Elemente können Sie das Attribut „text-align: center;“ verwenden, um eine horizontale Zentrierung zu erreichen. margin: 0 auto“-Attribut, um eine horizontale Zentrierung zu erreichen. Zentriert; 3. Durch Flex implementiert, legen Sie die Hauptachsenrichtung so fest, dass sie zentriert ist.

(1) Inline-Elemente (Text, Bilder, Inline-Tags (span), Inline-Block-Tags (display：inline-block)): text-align: center, unten wird span als Beispiel genommen:

<p class="father">
  <!-- 行内元素 -->
  <span class="son">hello</span> </p>

rrree

Vorteile: Gute Kompatibilität, einfach

Nachteile: text-alignEs ist vererbbar und wirkt sich auf untergeordnete Elemente aus

(2) Elemente auf Blockebene: margin：0 auto

.father {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  text-align: center;}

<!-- 相对于body居中 --><body>
  <!-- 块级元素 -->
  <p class="son"></p></body>

Vorteile: Einfache, gute Kompatibilität

Nachteile: Die Breite muss bekannt und kleiner als das übergeordnete Element sein

(3)flexImplementierung, Hauptachsenrichtung auf Mitte setzen

.son {
  width: 200px;
  height: 200px;
  border: 1px solid red;
  margin: 0 auto;}

rrree

Wenn mehrere Elemente vorhanden sind , es kann eingestellt werden auf:

 <p class="father">
   <span class="son"></span>
 </p>

Vorteile: Praktisch, kann Selbstanpassung erreichen

Nachteile: Etwas weniger kompatibel, PC-VersionIE10und höher unterstützt

( 4) Absolute Positionierungsimplementierung: Zijue Parent

.father {
  width: 500px;
  height: 100px;
  border: 1px solid red;
  display: flex;
  justify-content: center;}.son {
  width: 100px;
  background-color: turquoise;}

rrree

Vorteile: Sehr wenige Vorteile Sie können die Positionierung für Elemente verwenden, die schwer zu zentrieren sind margin-left

Nachteile: Außerhalb des Dokuments Fluss, viel Code, Kompatibilität Etwas schlechter,

unterstützt IE9以上 und muss den Breitenwert kennen. transform

Empfohlenes Lernen: „

Front-End-Video“

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie ein Element horizontal. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So bereinigen Sie Floats, wenn ein Container mehrere Floating-Elemente enthältNächster Artikel：So bereinigen Sie Floats, wenn ein Container mehrere Floating-Elemente enthält

In Verbindung stehende Artikel

Mehr sehen