So zentrieren Sie ein Element horizontal-Front-End-Fragen und Antworten-php.cn

So zentrieren Sie ein Element horizontal

藏色散人

Freigeben： 2020-07-02 10:55:30

Original

4549 Leute haben es durchsucht

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.

So zentrieren Sie ein Element horizontal

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

rrree

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

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!