Heim  >  Artikel  >  Web-Frontend  >  So legen Sie die Mittenausrichtung in CSS fest

So legen Sie die Mittenausrichtung in CSS fest

藏色散人
藏色散人Original
2021-04-29 09:07:335929Durchsuche

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.

So legen Sie die Mittenausrichtung in CSS fest

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

css – Methode zur zentrierten Ausrichtung

  • text-align:center – horizontale Zentrierung

gilt nur für Inline-Elemente wie Text, Bilder, Schaltflächen (Anzeige ist auf Inline oder eingestellt). Inline-Block usw.) für horizontale Zentrierung

  • margin: vertikal automatisch; —— 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;
        }
  • Linienhöhe —— Vertikale Zentrierung

line-height=height, nur gültig für eine Textzeile

  • Tabelle verwenden – horizontale und vertikale Zentrierung

Die Attribute align='center' und valign='middle' von td/th können horizontal und vertikal zentriert sein.

  • Flexibles Layout – horizontale und vertikale Zentrierung :table-cell Simulieren wir es als Tabellenzelle
die Breite und Höhe des unbekannten untergeordneten Elements - Horizontale und vertikale Zentrierung
  • .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 }

    Für detailliertere HTML-/CSS-Kenntnisse besuchen Sie bitte die

    css Video-Tutorial
  • Kolumne!

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!

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