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: 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>.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>vertikal-align
:centeredIch 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>So implementieren Sie eine HTML-ähnliche Befehlszeilenschnittstelle
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!
