So zeigen Sie HTML in der Mitte an

So zeigen Sie HTML in der Mitte an

Im Webdesign ist die zentrierte Anzeige eine sehr verbreitete Layoutmethode. Für HTML-Seitenentwickler ist das Zentrieren von Elementen eine wesentliche Fähigkeit. In diesem Artikel sehen wir uns einige Möglichkeiten an, HTML zu zentrieren.

1. Text zentrieren

Text in HTML-Seiten können Sie ganz einfach mit CSS zentrieren. Fügen Sie Ihrer CSS-Datei beispielsweise den folgenden Code hinzu:

text-align: center;

Dieser Code zentriert den gesamten Text im Element.

2. Elemente auf Blockebene sind zentriert.

Elemente auf Blockebene beziehen sich auf DIV, P, H1 und andere Elemente. Um diese Elemente zu zentrieren, können wir die Eigenschaft margin verwenden. Der folgende Code zentriert das DIV-Element horizontal:

div {
  margin: 0 auto;
}

Dadurch wird auf der linken und rechten Seite des DIV-Elements der gleiche Abstand gewährleistet und das Element horizontal zentriert.

3. Das Bild zentrieren

Das Zentrieren des Bildes ist ebenfalls eine Fähigkeit, die Entwickler anwenden müssen. Wir können das Bild mithilfe des text-align-Attributs zentrieren, indem wir den folgenden Code in HTML schreiben:

<div style="text-align:center;">
  <img src="img/logo.jpg" alt="Logo">
</div>

Der obige Code platziert das Bild und seine Beschreibung in einem DIV und zentriert das DIV. Sie können die Größe des Bildes steuern, indem Sie die Breite und Höhe des DIV festlegen.

4. Zentrieren Sie die Tabelle

Wenn Sie die Tabelle auf der HTML-Seite zentrieren müssen, können Sie die Attribute „margin“ und „text-align“ verwenden. Der folgende Code zeigt, wie man eine Tabelle zentriert:

table {
  margin: 0 auto;
  text-align: center;
}

Dieser Code zentriert die Tabelle horizontal und zentriert die Daten in der Tabelle in den Spalten.

5. Zentrierte Anzeige von Elementen mit fester Breite

Wenn wir ein Element mit fester Breite zentrieren müssen, können wir den folgenden CSS-Code verwenden:

.element {
  position: absolute;
  left: 50%;
  margin-left: -[元素宽度的一半];
}

Dadurch wird der Abstand des Elements relativ zur linken Seite des 50 % des übergeordneten Elements und verschieben Sie es in Richtung. Verschieben Sie das Element um die Hälfte seiner Breite nach links, um es zu zentrieren.

6. Flexbox-Layout

Schließlich können wir auch das Flexbox-Layout verwenden, um eine zentrierte Anzeige zu erreichen. Flexbox ist ein flüssiges Layout, das die Anordnung der Elemente auf der Seite optimiert. Hier ist ein Beispiel:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Fügen Sie den obigen Code zu einem Container in einer HTML-Datei hinzu, um den Inhalt im Container zu zentrieren.

Zusammenfassung

Die zentrierte Anzeige ist eine der grundlegenden Techniken beim HTML-Seitendesign. Ob es sich um Text, Bilder, Tabellen oder Elemente mit fester Breite handelt, Sie können verschiedene Techniken verwenden, um eine Zentrierung zu erreichen. Wenn Entwickler diese Techniken beherrschen, wird es ihnen leichter fallen, schöne, auffällige Seiten zu erstellen.

Das obige ist der detaillierte Inhalt vonSo zeigen Sie HTML in der Mitte an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!