Heim > Artikel > Web-Frontend > So legen Sie die Mittenausrichtung in CSS fest
So legen Sie die zentrierte Ausrichtung in CSS fest: 1. Horizontale Zentrierung durch „text-align:center“ oder „margin:vertical auto;“; 2. Vertikale Zentrierung durch „line-height“ 3. Durch „elastisches Layout“ erreichen horizontale und vertikale Zentrierung und so weiter.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
css – Methode zur zentrierten Ausrichtung
gilt nur für Inline-Elemente wie Text, Bilder, Schaltflächen (Anzeige ist auf Inline oder eingestellt). Inline-Block usw.) für horizontale Zentrierung
Nur horizontale Zentrierung und ist für die Positionierung schwebender Elemente ungültig
.father{ width:500px; height:200px; background-color::#f98769; overflow:hidden;//不可缺少否则margin-top不生效 } .son{ width: 100px; height: 100px; margin:50px auto ; background-color: #ff0000; }
line-height=height, nur gültig für eine Textzeile
Die Attribute align='center' und valign='middle' von td/th können horizontal und vertikal zentriert sein.
.father{display:flex;justity-content:center;align-items:center;}.father{display:flex;flex-direction:column;//改变主轴为cross axisjustity-content:center;}
Pseudoelementmethode - Vertikale Zentrierung
.father{ height:300px; background:#ccc; display:table-cell; /*IE8以上及Chrome、Firefox*/ vertical-align:middle; /*IE8以上及Chrome、Firefox*/ text-align:center; } .son{ display:inline-block;//或是inline }
Das obige ist der detaillierte Inhalt vonSo legen Sie die Mittenausrichtung in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!