Heim >Web-Frontend >CSS-Tutorial >So stellen Sie div in CSS vertikal zentriert ein
So stellen Sie div in CSS vertikal zentriert ein
- coldplay.xixiOriginal
- 2021-04-29 11:09:574481Durchsuche
So legen Sie die vertikale Zentrierung eines Div mit CSS fest: 1. Stellen Sie die tatsächliche Höhe so ein, dass sie der Höhe der Zeile entspricht [Zeilenhöhe] 2. Stellen Sie den Abstand so ein, dass die oberen und unteren Abstandswerte übereinstimmen sind gleich.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.
Css-Methode zum Festlegen der vertikalen Div-Zentrierung:
1. Vertikale Einzelzeilenzentrierung
Wenn sich in einem Container nur eine Textzeile befindet, ist es relativ einfach, diese zu zentrieren tatsächliche Höhe und Position Die Höhe der Zeilen kann gleich der Zeilenhöhe sein.
Zum Beispiel:
div {
height:25px;
line-height:25px;
overflow:hidden;
}Dieser Code ist sehr einfach. Die Einstellung overflow:hidden wird später verwendet, um zu verhindern, dass der Inhalt den Container überschreitet oder automatisch Zeilen umbricht, sodass der vertikale Zentrierungseffekt nicht erreicht werden kann.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 单行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<div>现在我们要使这段文字垂直居中显示！</div>
</body>
</html>2. Vertikale Zentrierung mehrerer Textzeilen mit unbekannter Höhe
Wenn die Höhe eines Inhalts variabel ist, können wir die letzte im vorherigen Abschnitt erwähnte Methode zur horizontalen Zentrierung verwenden. Legen Sie einfach die fest Polsterung so, dass die oberen und unteren Polsterwerte gleich sind. Auch dies ist eine Möglichkeit, eine vertikale Zentrierung zu „sehen“, es ist lediglich eine Möglichkeit, dafür zu sorgen, dass der Text das dc6dce4a544fdca2df29d5ac0ea9906b vollständig ausfüllt. Sie können Code ähnlich dem folgenden verwenden:
div {
padding:25px;
}Der Vorteil dieser Methode besteht darin, dass sie in jedem Browser ausgeführt werden kann und der Code sehr einfach ist. Voraussetzung für die Anwendung dieser Methode ist jedoch, dass die Höhe des Containers angegeben werden muss skalierbar sein.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 多行文字实现垂直居中 </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body { font-size:12px;font-family:tahoma;}
div {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<div><br> <pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！