Ausführliche Erklärung der einfachen Methode zum Zentrieren von CSS-Elementen

Dieser Artikel stellt hauptsächlich eine einfache Methode vor, um das zentrierte Layout von CSS-Elementen im Detail zu erklären. Der Artikel stellt drei Situationen vor: Inline-Elemente, Blockelemente und Inline-Blöcke können darauf verweisen

Zuerst Zunächst müssen wir wissen: Welche Arten von Elementen gibt es?

Inline-Elemente (display:inline;) wie a, span, b, i [Ein nicht anpassbares Feld]

[Standard-Peers können weiterhin demselben Tag-Typ folgen]
[Breite der Inhaltserweiterung]
[Breite und Höhe werden nicht unterstützt]
[Obere und untere Ränder und Abstände werden nicht unterstützt]
[Codeumbruch wird als leer geparst]

Blockelement (display:block ;) Wie p, p, h1-h6

[Standardmäßig in einer Zeile anzeigen]
[Grundsätzlich werden alle CSS-Befehle unterstützt]

Inline-Block ( display:inline-block;) wie img [img ist so eine magische Sache. Es ist weder Inline noch Block, sondern ein Inline-Block.】

[Block wird in einer Zeile angezeigt]
[Breite und Höhe unterstützen]
[Inhalt erweitert die Breite, wenn keine Breite vorhanden ist]

Dann zentrieren wir die oben genannten drei Elemente der Reihe nach

1. Einzeiliger Text eingebetteter Elemente

Die häufigste Lösung ist die Verwendung von Textausrichtung und line-height

line-height:200px;   
text-align:center;

Aber ist diese Methode absolut perfekt? Ich glaube nicht (jemand beschwert sich möglicherweise über meine Zwangsstörung)
Wie auch immer, jedes Mal, wenn ich Text auswähle, fühle ich mich sehr unzufrieden, wenn ich sehe, dass auch Nicht-Textbereiche ausgewählt werden, IE6-8 jedoch nur auswählt Text

2. Zentrieren Sie das Blockelement

Lösung: Positionierungselement + negativen Randwert verwenden

width:100px;   
height:100px;   
position:relative;   
left:100px;   
top:100px;   
margin-left:-50px;   
margin-top:-50px;

Nachteil: Erforderlich. Kennen Sie die Breite und Höhe der Box

3. Zentrieren Sie den Inline-Block

(1) Konvertieren Sie das Bild in ein Hintergrundbild , und verwenden Sie dann „background-position:center;“, aber Sie müssen darauf achten. Da sich die Links zu Bildern im Allgemeinen häufig ändern, müssen Sie Folgendes tun:

<img  style=”background-img:url(imgURL)” / alt="Ausführliche Erklärung der einfachen Methode zum Zentrieren von CSS-Elementen" >

Verstößt dies gegen die Prinzip der Inhalts-Stil-Trennung?

(2) Hilfstags

HTML-Code:

<p class="box">  
    <img  src="img.png" / alt="Ausführliche Erklärung der einfachen Methode zum Zentrieren von CSS-Elementen" ><span></span>  
</p>

CSS-Code:

.box{width:200px;height:200px;border:1px solid #333;margin:0 auto;text-align:center;}   
.box img{vertical-align:middle;border:1px solid #999;padding:2px;}   
.box span{display:inline-block;height:100%;background:#333;vertical-align:middle;}

Wirkung:

Unsinn: Das img-Element und das Hilfselement span müssen in einer Zeile liegen, sonst kommt es bei Verwendung von Inline-Block zu einer unvollständigen horizontalen Zentrierung, dem Zeilenumbruch wird in den Weltraum geparst. Tatsächlich gibt es im Internet noch andere Methoden, beispielsweise die seit langem beliebte Tabellenmethode. Es gibt viele davon online, daher werde ich sie hier nicht zeigen.

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung der einfachen Methode zum Zentrieren von CSS-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!