In diesem Artikel werden hauptsächlich die verschiedenen Methoden zur vertikalen Zentrierung von p im CSS-Tutorial ausführlich vorgestellt, einschließlich der Methode zur vertikalen Zentrierung von mehrzeiligem Text. Interessierte Freunde können sich darauf beziehen
darüber sprechen Auf diese Frage fragen sich einige Leute vielleicht, ob es in CSS das Attribut vertical-align gibt, um die vertikale Zentrierung festzulegen? Auch wenn einige Browser dies nicht unterstützen, muss ich nur ein wenig CSS-Hack-Technologie anwenden! Deshalb muss ich hier ein paar Worte sagen. Es gibt zwar ein Vertical-Align-Attribut in CSS, aber es wird nur für Elemente mit dem Valign-Attribut im (X)HTML-Element wirksam, wie zum Beispiel < in Tabellenelemente. ;td>,
, haben keine valign-Attribute, daher funktioniert die Verwendung von Vertical-Align nicht.
1. Einzeilige vertikale Zentrierung
Wenn sich in einem Container nur eine Textzeile befindet, ist es relativ einfach, diese zu zentrieren seine tatsächliche Höheheight kann gleich der Höhe der Linie line-height sein.
Zum Beispiel:
p {
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 um einen automatischen Zeilenumbruch zu ermöglichen, sodass die vertikale Zentrierung gewährleistet ist Wirkung kann nicht erreicht werden.
<!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;}
p {
height:25px;
line-height:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}
</style>
</head>
<body>
<p>现在我们要使这段文字垂直居中显示！</p>
</body>
</html>2. Vertikale Zentrierung mehrerer Textzeilen unbekannter Höhe
Wenn ein Inhalt seine Höhe variabel ist, können wir die letzte im vorherigen Abschnitt erwähnte Methode zur horizontalen Zentrierung verwenden, bei der Padding so eingestellt wird, dass die oberen und unteren Padding-Werte gleich sind. Auch hier handelt es sich um eine Möglichkeit, eine vertikale Zentrierung zu „sehen“, es geht lediglich darum, dass der Text das
vollständig ausfüllt. Sie können Code ähnlich dem folgenden verwenden:
p {
padding:25px;
}Der Vorteil dieser Methode besteht darin, dass sie in jedem Browser ausgeführt werden kann und der Code sehr einfach ist, aber die Voraussetzung für die Anwendung dieser Methode ist dies Die Höhe des Behälters muss einziehbar 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;}
p {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}
</style>
</head>
<body>
<p><pre class="brush:php;toolbar:false">现在我们要使这段文字垂直居中显示！
p {
padding:25px;
border:1px solid #FF0099;
background-color:#FFCCFF;
}