So zentrieren Sie die Box in HTML5

下次还敢
Freigeben: 2024-04-05 12:27:18
Original
995 Leute haben es durchsucht

Um die Box in HTML5 zu zentrieren, gibt es die folgenden Methoden: horizontale Zentrierung: text-align: centermargin: autodisplay: flex; vertikale Zentrierung: Vertical-align: middletransform: Translate(-50%, - 50 %);Position: absolut; oben: 50 %; transformieren: übersetzen(-50 %, -50 %); , Es gibt mehrere Möglichkeiten, eine Box horizontal und vertikal zu zentrieren:

horizontal zentrierenSo zentrieren Sie die Box in HTML5

text-align: center

: Diese Eigenschaft zentriert den Text innerhalb der Box horizontal. Es wird jedoch nicht die gesamte Box horizontal zentriert.

margin: auto: Diese Eigenschaft zentriert die Box horizontal, sofern für die Box eine Breite festgelegt ist.

    display: flex; justify-content: center;
  • : Diese CSS-Kombination platziert die Box in einem horizontalen Flex-Container und zentriert sie horizontal. text-align: center:此属性将盒子内的文本水平居中。不过,它不会水平居中整个盒子。
  • margin: auto:此属性将盒子在水平方向居中,前提是盒子已设置了宽度。
  • display: flex; justify-content: center;:此 CSS 组合将盒子放在一个水平的 flex 容器中,并将其水平居中。

垂直居中

  • vertical-align: middle:此属性在行内元素(如图像)或表格单元格中垂直居中内容。
  • transform: translate(-50%, -50%);:此属性将盒子垂直和水平移动其自身高度和宽度的 50%,从而使其居中。它适用于绝对或相对定位的盒子。
  • position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  • Vertikale Mitte

vertical-align: middle
    : Diese Eigenschaft zentriert Inhalte innerhalb von Inline-Elementen (z. B. Bildern) oder Tabellenzellen vertikal.
  • transform: translator(-50%, -50%);
  • : Diese Eigenschaft verschiebt die Box vertikal und horizontal um 50 % ihrer eigenen Höhe und Breite und zentriert sie so. Es funktioniert mit absolut oder relativ positionierten Boxen.
  • position: absolute; top: 50%; left: 50%; transform: Translate(-50%, -50%);
  • : Diese CSS-Kombination zentriert das absolut positionierte Feld vertikal horizontal.
🎜🎜🎜Zusätzliche Tipps🎜🎜🎜🎜🎜Flexbox- und Rasterlayout: 🎜Diese modernen Layoutsysteme bieten flexiblere Zentrierungsoptionen. 🎜🎜🎜Prozentbreite: 🎜 Legt die Boxbreite auf einen Prozentsatz der Containerbreite fest, sodass sie die gleiche Breite wie der Container hat und vertikal zentriert ist (wenn der Container bereits vertikal zentriert ist). 🎜🎜

Das obige ist der detaillierte Inhalt vonSo zentrieren Sie die Box in HTML5. 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!