Der folgende Editor bietet Ihnen eine kurze Diskussion zum Thema der horizontalen Zentrierung der CSS-Verarbeitung. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Kommen Sie und schauen Sie sich den Editor an. Ich wünsche Ihnen allen ein frohes Spiel das übergeordnete Element; zentrieren Sie den Inhalt des übergeordneten Elements
2. Horizontale Zentrierungseinstellung – Blockelement mit fester Breite
Die Breite des Blockelements ist fest Wert, indem Sie den Wert „Linker und rechter Rand“ auf „Auto“ setzen, um eine zentrierte Einstellung zu erreichen - Blockelement mit variabler Breite
Methode 1. Tabellen-Tag hinzufügen Beispiel:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>定宽块状元素水平居中</title> <style> p{ width: 200px;/*固定的宽度*/ margin: 20px auto;/*左右margin设置为auto*/ border: 1px solid red; } </style> </head> <body> <p>我是定宽块状元素,我要水平居中显示。</p> </body> </html>
Methode 2.
Legen Sie die display:inline;-Methode fest, ähnlich der ersten Methode Anzeigetyp für Inline-Elemente, fahren Sie fort Attributeinstellungen für Elemente mit variabler Breite
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>不定宽块状元素水平居中</title> <style> table{ margin:0 auto; } /*下面是任务区代码*/ .wrap{ background:#ccc; } </style> </head> <body> <table> <tbody> <tr><td> <p class="wrap"> 我要水平居中 </p> </td></tr> </tbody> </table> </body> </html>
Position festlegen: relativ und links: 50 % Verwenden Sie die relative Positionierung, um das Element um 50 % nach links zu verschieben, d. h. um den Zweck der Zentrierung zu erreichen Beispiel:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>不定宽块状元素水平居中</title> <style> .container{text-align:center;} .container ul{list-style:none;margin:0;padding:0;display:inline;} .container li{margin-right:8px;display:inline;} </style> </head> <body> <p class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </p> </body> </html>
Diese kurze Diskussion zum Thema CSS-Verarbeitungsebenenzentrierung ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass jeder das PHP-Chinesisch unterstützt Webseite.
Weitere verwandte Artikel zur Zentrierung der CSS-Verarbeitungsebene finden Sie auf der chinesischen PHP-Website!