Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

高洛峰
Freigeben: 2017-03-10 11:08:24
Original
1738 Leute haben es durchsucht

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;
Nach dem Login kopieren

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
Ausführliche Erklärung der einfachen Methode zum Zentrieren von CSS-Elementen

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;
Nach dem Login kopieren

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" >
Nach dem Login kopieren

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>
Nach dem Login kopieren

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;}
Nach dem Login kopieren

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

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!