1. Einstellung der horizontalen Zentrierung
Einstellung der Inline-Elementzentrierung: Wenn das festgelegte Element ein Inline-Element wie Text oder Bild ist, wird die horizontale Zentrierung erreicht, indem text-align:center auf das übergeordnete Element festgelegt wird. Das Codebeispiel lautet wie folgt:
1 2 3 4 5 6 7 8 9 10 |
|
Zentrierungseinstellung von Blockelementen mit fester Breite: Elemente, die die beiden Bedingungen „feste Breite“ und „Block“ erfüllen, können zentriert werden, indem der Wert „linker und rechter Rand“ auf festgelegt wird "Auto". Das Codebeispiel lautet wie folgt:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
Zentrierung von Blockelementen mit variabler Breite:
Das Hinzufügen des Tabellen-Tags nutzt die Längenanpassungsfähigkeit von Das Tabellen-Tag - --Das heißt, die Länge ist nicht definiert und die Länge des übergeordneten Elementkörpers ist nicht standardmäßig festgelegt (die Länge der Tabelle wird durch die Länge des darin enthaltenen Textes bestimmt), sodass sie als a betrachtet werden kann Blockelement mit fester Breite, und dann wird die zentrierte Randmethode mit fester Breite verwendet. Das Codebeispiel lautet wie folgt:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
2. Anzeige festlegen: Inline-Methode: Ändern Sie die Anzeige von Elementen auf Blockebene in den Inline-Typ (stellen Sie sie auf Inline-Elementanzeige ein) und verwenden Sie dann text-align: zentrieren, um den Zentriereffekt zu erzielen. Der Code lautet wie folgt:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
3. Position:relativ und links:50% festlegen: Durch Festlegen von float auf das übergeordnete Element und anschließendes Festlegen von position:relativ und links:50% auf das übergeordnete Element , legt das untergeordnete Element position: relative und left: -50 % fest, um eine horizontale Zentrierung zu erreichen. Der Code lautet wie folgt:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|
2. Vertikale Zentrierungseinstellung
Eine einzelne Textzeile mit einer bestimmten Höhe des übergeordneten Elements:
Vertikale Zentrierungsmethode von eine einzelne Textzeile mit einer bestimmten Höhe des übergeordneten Elements. Dies wird erreicht, indem die Höhe und die Zeilenhöhe des übergeordneten Elements konsistent eingestellt werden. (height: die Höhe des Elements, line-height: Wie der Name schon sagt, bezieht sich die Zeilenhöhe (Zeilenabstand) auf den Abstand zwischen den Grundlinien zwischen den Zeilen im Text). Der Code lautet wie folgt:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
Mehrere Textzeilen mit einer bestimmten Höhe des übergeordneten Elements:
1 Verwenden Sie das Tag „Insert Table“ (einschließlich tbody, tr, td). und setze Vertical-Align: Middle. Es gibt in CSS ein Attribut für die vertikale Zentrierung namens „vertikal-align“. Wenn das übergeordnete Element diesen Stil festlegt, ist er für alle untergeordneten Elemente vom Inline-Block-Typ nützlich. Der Code lautet wie folgt:
1 2 3 4 5 6 7 8 9 10 11 |
|
2. In Chrome, Firefox und IE8 oder höher können Sie die Anzeige von Elementen auf Blockebene auf Tabellenzelle einstellen (auf Tabellenzellenanzeige einstellen), aktivieren das Vertical-Align-Attribut. Beachten Sie jedoch, dass IE6 und 7 diesen Stil nicht unterstützen und die Kompatibilität relativ schlecht ist. Der Code lautet wie folgt:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
Der Vorteil dieser Methode besteht darin, dass keine zusätzlichen bedeutungslosen Tags hinzugefügt werden müssen, aber die Mängel liegen auch auf der Hand. Die Kompatibilität ist nicht sehr gut, und das ist auch nicht der Fall kompatibel mit IE6 und 7 und die Anzeige wird auf diese Weise geändert. Der Block wurde zu einer Tabellenzelle, wodurch die Natur der ursprünglichen Blockelemente zerstört wurde.
3. Ändern Sie implizit den Anzeigetyp
Wenn es sich um ein Element handelt (unabhängig vom vorherigen Elementtyp, außer display:none), legen Sie einen der folgenden 2 Sätze fest:
1. Position: absolut
2. float: left oder float:right
, der Anzeigetyp des Elements ändert sich automatisch in display:inline-block (Blockelement). Natürlich können Sie die Breite und Höhe des Elements festlegen, und die Standardbreite belegt nicht das übergeordnete Element. Der Code lautet wie folgt:
1 2 3 4 5 6 7 8 9 10 11 12 |
|