Einspaltiges Layout mit horizontal zentrierter Layoutmethode
- 一个新手Original
- 2017-09-06 10:36:041648Durchsuche
Horizontales zentriertes Layout
Übergeordnetes Element text-align:center; untergeordnetes Element: inline-block;
Vorteile: gute Kompatibilität;
-
Nachteile: Untergeordnete Elemente und übergeordnete Elemente müssen gleichzeitig festgelegt werden
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>水平居中布局</title> <style> *{ margin: 0; padding: 0; } .parent { width: 100%; background: green; text-align: center; } .child { display: inline-block; width: 800px; height: 100px; background: blue; } </style> </head> <body> <p class="parent"> <p class="child">1</p> <p class="child">2</p> <p class="child">3</p> <p class="child">4</p> <p class="child">5</p> <p class="child">6</p> </p> </body> </html>
Das obige ist der detaillierte Inhalt vonEinspaltiges Layout mit horizontal zentrierter Layoutmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
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
Vorheriger Artikel：Erkundung der Java-SpeicherzuordnungNächster Artikel：Erkundung der Java-Speicherzuordnung