Im Webdesign ist die Zentrierung sowohl für die Schönheit als auch für die Lesbarkeit sehr wichtig. In CSS gibt es viele Möglichkeiten, eine Zentrierung zu erreichen. Hier sind einige häufig verwendete Methoden.
1. Textzentrierung
1. Inline-Elementtextzentrierung
Für eine einzelne Textzeile können wir das text-align-Attribut verwenden Vervollständigen Sie die Zentrierung.
这里是居中的文本
2. Blockelementtext ist zentriert
Für mehrzeiligen Text oder Blockelemente können wir das Randattribut verwenden, um den linken und rechten Rand auf „Automatisch“ zu setzen Die Breitenzentrierung erfolgt nicht zu 100 %.
这里是居中的多行文本
2. Elementzentrierung
1. Horizontale Zentrierung
Verwenden Sie das Randattribut und stellen Sie den linken und rechten Rand auf „Automatisch“, um die horizontale Zentrierung abzuschließen .
2. Vertikale Zentrierung
Die vertikale Zentrierungsmethode ist komplizierter und es gibt viele Möglichkeiten, sie umzusetzen.
(1) Verwenden Sie Flexbox
, um display:flex und align-items:center auf dem übergeordneten Element festzulegen, um eine vertikale Zentrierung zu erreichen.
这里是垂直居中的元素
(2) Verwenden Sie table-cell
Setzen Sie display:table und Vertical-align:middle auf dem übergeordneten Element und legen Sie display:table-cell auf dem untergeordneten Element fest . Vertikale Zentrierung ist möglich.
这里是垂直居中的元素
(3) Verwenden Sie absolute
, um position:absolute;top:50%;left:50% und transform:translate(-50%,- 50%) festzulegen um eine vertikale Zentrierung zu erreichen.
这里是垂直居中的元素
(4) Verwenden Sie line-height
Setzen Sie height und line-height im übergeordneten Element gleich und legen Sie im untergeordneten Element Vertical-Align:Middle fest, um dies zu erreichen Vertikal zentriert.
这里是垂直居中的元素
Durch die oben genannten Methoden können wir leicht den zentrierenden Effekt von Elementen in Webseiten erzielen. Um bessere visuelle Effekte auf der Seite zu erzielen, muss je nach Situation die geeignete Methode ausgewählt werden.
Das obige ist der detaillierte Inhalt vonMehrere Methoden zur CSS-Zentrierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
