Ein kurzer Überblick über 4 Ideen zum Erreichen einer horizontalen Zentrierung mithilfe von CSS

Horizontale Zentrierung ist ein häufiges Problem. Es scheint, dass es viele Wege gibt und alle Wege nach Rom führen. Doch nach einer systematischen Durchsicht geht es tatsächlich um mehrere Ideen. In diesem Artikel werden 4 Ideen zur horizontalen Zentrierung vorgestellt.

Horizontale Zentrierung ist ein häufig auftretendes Problem. Es scheint, dass es viele Wege gibt und alle Wege nach Rom führen. Doch nach einer systematischen Durchsicht geht es tatsächlich um mehrere Ideen. In diesem Artikel werden 4 Ideen zur horizontalen Zentrierung vorgestellt. Interessierte Freunde können sich darauf beziehen!

Idee 1: Setzen Sie text-align:center im übergeordneten Element, um das Inline-Element horizontal zu zentrieren

Das display des Elements ist auf Inline-Block gesetzt, sodass die untergeordneten Elemente zu Inline-Elementen werden

[Hinweis] Um mit dem IE7-Browser kompatibel zu sein, können Sie display:inline;zoom verwenden :1; Erzielen Sie den Effekt von Inline-Block

<style>   
.parent{text-align: center;}       
.child{display: inline-block;}   
</style>    
<p class="parent" style="background-color: gray;">   
  <p class="child" style="background-color: lightblue;">DEMO</p>   
</p>

Idee 2: Festlegen margin: 0 implementiert automatisch die horizontale Zentrierung von Elementen auf Blockebene

【1】Zeigen Sie das Unterelement als Tabelle an, um das Unterelement zu erstellen -element-Element auf Blockebene. Gleichzeitig wird auch die Tabelle umbrochen und die Breite um den Inhalt erweitert

[Hinweis] Wenn Sie mit dem IE7-Browser kompatibel sein möchten, können Sie das ändern Struktur des untergeordneten Elements zu

<style>   
.child{   
    display: table;   
    margin: 0 auto;   
}   
</style>    
<p class="parent" style="background-color: gray;">   
  <p class="child" style="background-color: lightblue;">DEMO</p>   
</p>

[2] Wenn das untergeordnete Element eine feste Breite hat, können Sie kann das Box-Modell< des absolute Positionierung 🎜>-Attributs verwenden, um den Zentrierungseffekt zu erzielen, wenn die Breite nicht festgelegt ist, wird das untergeordnete Element gestreckt

<style>   
.parent{   
  position: relative;   
}   
.child{   
 position: absolute;   
 left: 0;   
 rightright: 0;   
 margin: 0 auto;   
 width: 50px;   
}   
</style>    
<p class="parent" style="background-color: gray;height: 20px;">   
    <p class="child" style="background-color: lightblue;">DEMO</p>      
</p>

Drei Ideen: Pass Das Offset-Attribut der absoluten Positionierung realisiert die horizontale Zentrierung

【1】 mit Translate() Verschiebung Funktion
Übersetzungsfunktion Der Prozentsatz ist relativ zur eigenen Breite, sodass left:50% in Kombination mit TranslateX(-50%) einen zentrierten Effekt erzielen kann

　[Hinweis] IE9-Browser unterstützt nicht

<style>   
.parent{   
  position: relative;   
}   
.child{   
  position: absolute;   
  left: 50%;   
  transform:translateX(-50%);   
}   
</style>    
<p class="parent" style="background-color: gray;height: 20px;">   
  <p class="child" style="background-color: lightblue;">DEMO</p>   
</p>

【2】Mit relativem
Das relative Offset-Attribut ist relativ zu sich selbst, da das untergeordnete Element auf „absolut“ gesetzt wurde. Wenn Sie also „relativ“ verwenden, müssen Sie eine Ebene der

-Struktur hinzufügen, damit ihre Breite mit der Breite des Unterelements übereinstimmt -element

[Hinweis] Diese Methode ist vollständig kompatibel, fügt jedoch eine HTML-Struktur hinzu

<style>   
.parent{   
  position: relative;   
}   
.childWrap{   
  position: absolute;   
  left: 50%;   
}   
.child{   
  position: relative;   
  left: -50%;   
}   
</style>    
<p class="parent" style="background-color: gray;height: 20px;">   
  <p class="childWrap">   
    <p class="child" style="background-color: lightblue;">DEMO</p>    
  </p>      
</p>

【3】Mit negativem Rand
Der Prozentsatz des Randes ist relativ zum enthaltenden Block, daher muss eine Schicht der

-Struktur hinzugefügt werden. Da der Standardwert für die Breite „Auto“ lautet, erhöht sich auch die Breite, wenn ein negativer Rand festgelegt wird. Daher ist zu diesem Zeitpunkt eine Verarbeitung mit fester Breite erforderlich

[Hinweis] Obwohl es vollständig kompatibel ist, müssen die Seitenstruktur und die Verarbeitung mit fester Breite erhöht werden, sodass die Anwendungsszenarien begrenzt sind

<style>   
.parent{   
  position: relative;   
}   
.childWrap{   
  position: absolute;   
  left: 50%;   
}   
.child{   
  width:50px;   
  margin-left:-50%;   
}   
</style>    
<p class="parent" style="background-color: gray;height: 20px;">   
  <p class="childWrap">   
    <p class="child" style="background-color: lightblue;">DEMO</p>    
  </p>      
</p>

Idee 4: Verwenden Sie das flexible Boxmodell Flex, um eine horizontale Zentrierung zu erreichen
　[Hinweis] IE9-Browser nicht support

【1】 Legen Sie die Ausrichtung der Hauptachse im skalierbaren Container fest jusify-content:center

<style>   
.parent{   
  display: flex;   
  justify-content: center;   
}   
</style>    
<p class="parent" style="background-color: gray;">   
    <p class="child" style="background-color: lightblue;">DEMO</p>      
</p>

Das obige ist der detaillierte Inhalt vonEin kurzer Überblick über 4 Ideen zum Erreichen einer horizontalen Zentrierung mithilfe von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!