Ausführliche Erläuterung von 5 Ideen für CSS, um gleichzeitig eine horizontale und vertikale Zentrierung zu erreichen-CSS-Tutorial-php.cn

Der unten stehende Editor liefert Ihnen eine kurze Analyse von 5 Ideen, wie Sie mithilfe von CSS gleichzeitig eine horizontale und vertikale Zentrierung erreichen können. Der Herausgeber findet es ziemlich gut. Jetzt werde ich es mit Ihnen teilen und es als Referenz verwenden.

Die horizontale Zentrierung und die vertikale Zentrierung werden separat vorgestellt Führen Sie gleichzeitig eine horizontale und vertikale Zentrierung ein

Idee 1: text-align + line-heightum eine horizontale und vertikale Zentrierung von einzeiligem Text zu erreichen

<style>   
.test{   
    text-align: center;   
    line-height: 100px;   
}   
</style>

Nach dem Login kopieren

XML/HTML-CodeInhalt in die Zwischenablage kopieren

<p Klasse="Test" Stil= "Hintergrundfarbe: hellblau;Breite: 200px;">Testtextp >

Idee 2: Textausrichtung + Vertikalausrichtung

【1】Legen Sie Textausrichtung und Vertikalausrichtung für das übergeordnete Element fest und stellen Sie das übergeordnete Element auf ein das Tabellenzellenelement und das untergeordnete Element zum Inline-Block-Element

[Hinweis] Wenn es mit dem IE7-Browser kompatibel ist, ändern Sie die Struktur in

, um den Effekt einer Tabellenzelle zu erzielen ; verwenden Sie display:inline;zoom:1; um den Effekt von inline-block

<style>   
.parent{   
    display: table-cell;   
    text-align: center;   
    vertical-align: middle;   
}   
.child{   
    display: inline-block;   
}   
</style>

Nach dem Login kopieren

<p class="parent" style="background-color: gray; width:200px; height:100px;">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Nach dem Login kopieren

[2] zu erreichen Untergeordnetes Element ist ein Bild, table-cell kann nicht verwendet werden, aber sein übergeordnetes Element verwendet Zeilenhöhe anstelle von height und die Schriftgröße ist auf 0 gesetzt. Das untergeordnete Element selbst legt „vertikal-align:middle“ fest

<style>   
.parent{   
    text-align: center;   
    line-height: 100px;   
    font-size: 0;   
}   
.child{   
    vertical-align: middle;   
}   
</style>

Nach dem Login kopieren

<p class="parent" style="background-color: gray; width:200px; ">
  <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">
</p>

Nach dem Login kopieren

Drei Ideen: margin + Vertical-Alignment　

Wenn Sie Vertical-Alignment im übergeordneten Element festlegen möchten, müssen Sie es auf das Table-Cell-Element setzen, wenn Sie möchten, dass margin:0 automatisch horizontal ausgerichtet wird Zentrierter Blockelementinhalt. Die Breite muss auf das Tabellenelement eingestellt werden. Das Tabellenelement kann im Tabel-Cell-Element verschachtelt werden, genau wie eine Zelle eine Tabelle verschachteln kann

[Hinweis] Wenn es mit dem IE7-Browser kompatibel ist, muss die Struktur in

<style>   
.parent{   
    display:table-cell;   
    vertical-align: middle;   
}   
.child{   
    display: table;   
    margin: 0 auto;   
}   
</style>

Nach dem Login kopieren

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Nach dem Login kopieren

Idee 4: Verwendung absolute

[1] Nutzen Sie die Box-Modell-Funktion absolut positionierter Elemente und legen Sie margin:auto basierend darauf fest, dass das Offset--Attribut
bestimmt ist Wert.

<style>   
.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    top: 0;   
    left: 0;   
    rightright: 0;   
    bottombottom: 0;   
    height: 50px;   
    width: 80px;   
    margin: auto;   
}   
</style>

Nach dem Login kopieren

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Nach dem Login kopieren

【2】Verwenden Sie das Offset-Attribut absolut positionierter Elemente und das Translate() FunktionDer eigene Versatz erzielt den Effekt der horizontalen und vertikalen Zentrierung

[Hinweis] IE9-Browser unterstützt

<style>   
.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    transform: translate(-50%,-50%);   
}   
</style>

Nach dem Login kopieren

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Nach dem Login kopieren

nicht

【3】Wenn die Breite und Höhe des untergeordneten Elements bekannt sind, können Sie negative Randwerte verwenden, um den horizontalen und vertikalen Zentrierungseffekt zu erzielen

<style>   
.parent{   
    position: relative;   
}   
.child{   
    position: absolute;   
    top: 50%;   
    left: 50%;   
    width: 80px;   
    height: 60px;   
    margin-left: -40px;   
    margin-top: -30px;   
}   
</style>

Nach dem Login kopieren

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Nach dem Login kopieren

Idee 5: Flex　 verwenden

[Hinweis] IE9-Browser unterstützt nicht

[ 1] Verwenden Sie margin:auto<🎜 bei Flex-Projekten >

<style>   
.parent{   
    display: flex;   
}   
.child{   
    margin: auto;   
}   
</style>

Nach dem Login kopieren

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Nach dem Login kopieren

【2】Verwenden Sie die Hauptachsenausrichtung „justify-content“ und die Querachsenausrichtung „align-items“. der skalierbare Container

<style>   
.parent{   
    display: flex;   
    justify-content: center;   
    align-items: center;   
}   
</style>

Nach dem Login kopieren

<p class="parent" style="background-color: lightgray; width:200px; height:100px; ">
  <p class="child" style="background-color: lightblue;">测试文字</p>
</p>

Nach dem Login kopieren

Der obige Artikel analysiert kurz die 5 CSS-Ideen, um horizontale und Gleichzeitig hoffe ich, dass dies der gesamte Inhalt ist, den der Herausgeber mit Ihnen geteilt hat. Ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung von 5 Ideen für CSS, um gleichzeitig eine horizontale und vertikale Zentrierung zu erreichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：

css 水平垂直居中

Quelle：php.cn

Vorheriger Artikel：Detaillierte Beschreibung der Verwendung des Stylus-CSS-Frameworks Nächster Artikel：Beschreibung der Positionierungsmethode mithilfe des Positionsattributs in CSS

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

Neueste Artikel des Autors

Beispiele für HTML-Einstellungen für Fett, Kursiv, Unterstrichen, Durchgestrichen und andere Schrifteffekte

1970-01-01 08:00:00
Implementieren Sie eine Java-Version von Redis

1970-01-01 08:00:00
Die einfachste WeChat-Applet-Demo

1970-01-01 08:00:00
Einführung in einfache Betriebsmethoden von pandas.DataFrame (Erstellen, Indizieren, Hinzufügen und Löschen) in Python

1970-01-01 08:00:00
WeChat Mini-Programm: Beispiel für die Implementierung des Tab-Effekts

1970-01-01 08:00:00
Python erstellt benutzerdefinierte Methoden, um die Ausgabe der Wörterbuchstruktur zu verschönern

1970-01-01 08:00:00
HTML5: Verwenden Sie Canvas, um Videos in Echtzeit zu verarbeiten

1970-01-01 08:00:00
Asp.net verwendet SignalR zum Senden von Bildern

1970-01-01 08:00:00
WeChat Mini-Programmentwicklungs-Tutorial – Übersicht über die Funktionen von App() und Page()

1970-01-01 08:00:00
Ausführliche Erklärung zur Verwendung von Python Redis

1970-01-01 08:00:00

Aktuelle Ausgaben

Wie kann man schwebende Elemente in CSS vertikal statt horizontal stapeln lassen? Ich versuche, eine Webseite mit zwei Spalten zu erstellen, mit Hauptinhalt auf der einen S...

Aus 2024-04-06 20:45:26

386

Gibt es eine Möglichkeit, die vertikale Zentrierung des Texts in der Flexbox zu erzwingen, unabhängig davon, welchen anderen CSS-Code wir haben? Ich habe den folgenden CSS-Code, der Teil eines größeren CSS-Codes ist, der in einer Websi...

Aus 2024-04-06 20:41:51

518

Umbenennung: Vertikale Produktpräsentation Auf meiner Webseite werden derzeit die Projektprodukte Zeile für Zeile vertikal aufgeliste...

Aus 2024-04-05 09:17:50

3505

Vertikal gedrehter Tabellentitel, zentriert + unten ausgerichtet, browserübergreifend Ich habe eine Tabelle mit gedrehten Kopfzeilen, die in Chrome wie erwartet aussieht, in Fi...

Aus 2024-04-04 16:45:25

330

Umgeschriebener Titel: Zentrieren Sie ein festes HTML-Quadrat- oder Kreiselement horizontal und vertikal, wenn die Größe geändert wird Wie zentriert man ein quadratisches oder kreisförmiges festes HTML-Element unterschiedlich...

Aus 2024-04-04 12:31:51

322

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

最新ThinkPHP 5.1全球首发视频教程(60天成就PHP大牛线上培训班课)

1416789
php入门教程之一周学会PHP

4257395
JAVA 初级入门视频教程

2475694
小甲鱼零基础入门学习Python视频教程

503648
PHP 零基础入门教程

844100

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！

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Ausführliche Erläuterung von 5 Ideen für CSS, um gleichzeitig eine horizontale und vertikale Zentrierung zu erreichen