Was ist beim Zentrieren von Elementen in HTML zu beachten?

Dieses Mal werde ich Ihnen zeigen, worauf Sie beim Zentrieren von Elementen in HTML achten müssen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Keine Positionierung verwenden

Horizontale Zentrierung: text-align = center; (vererbbar)

Vertikale Zentrierung: margin:0 auto;( Block -Level-Elemente)

Andere Zentrierung: 1. Textzentrierung: Legen Sie die Höhe des übergeordneten Elements und die Höhe des untergeordneten Elements festLinienhöhe=Höhe (übergeordnetes Element)

2. Bild zentriert: Vertikale Ausrichtung: Mitte; <-- muss im Bildelement platziert werden

.first{
    width: 300px;
    height: 100px;
    background-color: black;
    color: white;
    text-align: center;
    margin: 0 auto; //针对块级元素
  }

<div class="first">
不使用定位（1）
</div>

.second{
    width: 300px;
    height: 100px;
    background-color: green;
  }
  .s_child{
    width: 150px;
    line-height: 100px;
  }
<div class="second">    
<div class="s_child">   
   不使用定位（2）    
</div> 
</div>

2. Positionierung und Zentrierung

a. Die Höhe des Elternelements ist fest 🎜>

Elternelement: relative Positionierung

Untergeordnetes Element:

absolute Positionierung

oben: 50 % ( halbe Höhe des übergeordneten Elements)

left:50%

　　　　margin-top: die Hälfte seiner eigenen Höhe; (ein negatives Vorzeichen hinzufügen)

　　　　

margin -left: die Hälfte seiner eigenen Breite; (ein negatives Vorzeichen hinzufügen)

.dw_one{
      width: 600px;
      height: 300px;
      position: absolute;
      background: black;
    }
    .dw_one_child{
      background: white;
      position: relative;
      width: 50px;
      height: 50px;
      top: 50%;
      left: 50%;
      margin-top: -25px;
      margin-left: -25px;
    }
    <div class="dw_one">
    <div class="dw_one_child">
      a    
    </div>
    </div>

Die Höhe des übergeordneten Elements ist nicht festgelegt

.wrapper{
      width: 600px;
      height: 600px;
    }
    .dw_two{
      width: 100%;
      height: 100%;
      position: absolute;
      background: black;
    }
    .dw_two_child{
      background: white;
      position: relative;
      top: 50%;
      left: 50%;
      width: 100px;
      height: 100px;
      transform:translate(-50%, -50%);
      -moz-transform:translate(-50%, -50%);
      -ms-transform:translate(-50%, -50%);
      -o-transform:translate(-50%, -50%);
      -webkit-transform:translate(-50%, -50%);
    }
    <div class="wrapper">
  <div class="dw_two">
      <div class="dw_two_child">
        a
      </div>
  </div>
</div>

3. Bezüglich die Zentrierung von mehrzeiligem Text

Verwenden Sie display:table; display:table-cell;

vertikal-align

:centered

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

#outer{
           width: 200px;
           height: 200px;
           background: #cccccc;
           display: table;
           _position: relative;   // "_"为了兼容IE6
       }
       #inner{
           display: table-cell;
           vertical-align: middle;
           _position: absolute;
           _top: 50%;
       }
       #content{
           _position: relative;
           _top: -50%;
       }
<div id="outer">
     <div id="inner">
       <div id="content">
          Paradise_追逐者所写的居中问题总结之我见
       </div>
    </div>
</div>

Verwandte Lektüre:

So implementieren Sie eine HTML-ähnliche Befehlszeilenschnittstelle

meta name="" content= "Sollte

verwenden

Das obige ist der detaillierte Inhalt vonWas ist beim Zentrieren von Elementen in HTML zu beachten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!