Heim > Artikel > Web-Frontend > Problem mit der horizontalen und vertikalen Zentrierung von HTML
Problem mit der horizontalen und vertikalen Zentrierung von HTML
- 高洛峰Original
- 2017-02-24 10:41:261389Durchsuche
Ich bin in letzter Zeit auf viele Zentrierungsprobleme gestoßen, deshalb habe ich mir die Zeit genommen, sie hier zusammenzufassen, damit sie in Zukunft leicht gefunden werden können
1 text
<p class="wrap">
我在中间……
</p>
.. height+line-height+text-center（只能居中单行）
.wrap{
width:px;
height:px;
border:px solid red;
text-align: center;
line-height: px;
}
ps:text-align:center zentriert das Inline-Element einfach unter dem Element
1.2 display:table -cell (mehrzeilige feste Höhe zentriert)
.wrap{
width:px;
height:px;
border:px solid red;
text-align: center;
display:table-cell;
vertical-align: middle;
}
display:table-cell：ie67不管用,最好配合display:table;一起用ie67: (Ich werde es nicht verwenden in die Zukunft, aber ich werde es hier einfügen. )
Methode 1: (Die Höhe des em-Tags ist gleich der Höhe des übergeordneten Elements, daher ist die Zentrierungsspanne und das em äquivalent zur Zentrierungsspanne auf dem übergeordneten Element)
<p class="wrap">
<span>
我在中间…… 我在中间…… 我在中间…… 我在中间……
</span>
<em></em>
</p>
.wrap{
width:px;
height:px;
border:px solid red;
text-align: center;
}
.wrap span{
vertical-align: middle;
display:inline-block;
width:px;
}
.wrap em{
height:%;
vertical-align: middle;
display:inline-block;
} Methode 2: (Durch Hinzufügen eines absolut positionierten übergeordneten Tags zum untergeordneten Element und anschließendes Anpassen der relativen Positionierung des untergeordneten Elements, um es horizontal zu zentrieren vertikal)
<p class="wrap">
<span class="span">
<span class="span">我在中间…… 我在中间…… 我在中间…… 我在中间……</span>
</span>
</p>
.wrap{
width:px;
height:px;
border:px solid red;
display:table;
position:relative;
overflow: hidden;
}
.wrap .span{
display:table-cell;
vertical-align: middle;
text-align: center;
*position:absolute;
top:%;
left:%;
}
.wrap .span{
*position:relative;
top:-%;
left:-%;
}1.3Polsterung (Innenpolsterung, selbstverständlich)
.wrap{
width:px;
border:px solid red;
padding:px ;
}2. Zentriertes Element
<p class="wrap">
<span></span>
</p>
2.1Position: Absolut+Rand negativer Wert (Breite und Höhe müssen zur Berechnung des Randes verfügbar sein)
.wrap{
width:px;
height:px;
position:absolute;
top:%;
left:%;
margin-top:-px;
margin-left:-px;
border:px solid red;
}
.wrap span{
width:px;
height:px;
background:red;
position: absolute;
top:%;
left:%;
margin-top:-px;
margin-left:-px;
}ps: CSS implementiert p horizontale Zentrierung und vertikale Zentrierung nach oben und unten
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>上下垂直居中 在线演示 pCSS5</title>
<style>
#main {
position: absolute;
width:400px;
height:200px;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-100px;
border:1px solid #00F
}
/*css注释：为了方便截图，对CSS代码进行换行*/
</style>
</head>
<body>
<p id="main">p水平居中和上下垂直居中<a href="http://www.pcss5.com/">pCSS5</a></p>
</body>
</html>Einführung in das Prinzip der horizontalen und vertikalen Zentrierung
Absolute Positionierungsposition:absolut wird hier verwendet und top, um den Objektabstand auf 50 % zu setzen, aber wenn er auf 50 % eingestellt ist, erreicht die Box nicht wirklich den Zentrierungseffekt, also setzen wir margin-left:-200px;margin-top:-100px; Hier ist der Wert von margin-left die halbe Breite und der Wert von margin-top ist auch die halbe Höhe des Objekts. Gleichzeitig wird er auf negativ gesetzt, sodass eine horizontale und vertikale Zentrierung erreicht wird.
Weitere Artikel zum Thema horizontale und vertikale Zentrierung von HTML finden Sie auf der chinesischen PHP-Website!