Eine kurze Diskussion zur vertikalen und horizontalen Zentrierung in Bootstrap

青灯夜游
Freigeben: 2021-01-19 09:26:52
nach vorne
10562 Leute haben es durchsucht

Dieser Artikel stellt Ihnen die vertikale und horizontale Zentrierung vonBootstrap3 und Bootstrap4 vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein. vertikal:

Das Rastersystem von Bootstrap verwendet Float: Das Floating Bei der linken Methode funktioniert das Vertical-Alignment-Attribut nicht. Löschen Sie daher das Float-Attribut des internen Div und fügen Sie das Anzeigeattribut wie folgt hinzu:Eine kurze Diskussion zur vertikalen und horizontalen Zentrierung in Bootstrap

// 文本: class ="text-center"
Nach dem Login kopieren

Bootstrap3-Anmeldefeld adaptive horizontale Zentrierung + vertikale Zentrierung

https://blog .csdn.net/shenzhen_zsw/article/details/75331515

Bootstrap4 So zentrieren Sie das Div vertikal:

Legen Sie die Höhe des Elements fest

// 图片居中: class = "center-block"
Nach dem Login kopieren

Wenden Sie .align-items-center an, um das Element vertikal zu zentrieren:

//其他元素: //bootstrap3水平居中:利用bootstrap列偏移 class = "col-md-offset-4 col-lg-offset-4col-xl-offset-4"
Nach dem Login kopieren
Anwenden . rechtfertigen. -content-center kann das Element horizontal zentrieren:

Weitere Programmierkenntnisse finden Sie unter:

Programmierlehre

! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion zur vertikalen und horizontalen Zentrierung in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:csdn.net
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 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!