So richten Sie Text in CSS vertikal aus: 1. Stellen Sie die tatsächliche Höhe der Textzeile so ein, dass sie der Höhe der Zeilenhöhe der Zeile entspricht. 2. Legen Sie die oberen und unteren Füllwerte fest Das Gleiche gilt für die vertikale Zentrierung mehrerer Textzeilen unbekannter Höhe. 3. Mit „Vertikal ausrichten“ können mehrere Textzeilen auf einer festen Höhe zentriert werden.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5- und CSS3-Version. Diese Methode ist für alle Computermarken geeignet.
Empfehlung: „CSS-Video-Tutorial“
1. Vertikale zentrierte Ausrichtung einer einzelnen TextzeileWenn sich nur eine Textzeile in einem Container befindet, ist es relativ einfach, sie zu zentrieren Legen Sie die tatsächliche Höhe und die Zeile fest, in der sie sich befindet. Die Höhe der Zeilenhöhe kann gleich sein. Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 单行文字实现垂直居中 </title>
<style type="text/css">
div {
height: 100px;
line-height: 100px;
border: 1px solid #FF0099;
}
</style>
</head>
<body>
<div>现在我们要使这段文字垂直居中显示！</div>
</body>
</html>
div {
padding:25px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多行文字实现垂直居中 </title>
<style type="text/css">
div {
padding: 25px;
border: 1px solid #FF0099;
width: 300px;
}
</style>
</head>
<body>
<div>
<pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！
div {
padding:25px;
border:1px solid #FF0099;
}