Maison >interface Web >tutoriel CSS >Tutoriel CSS : plusieurs méthodes de centrage vertical des divs
Tutoriel CSS : plusieurs méthodes de centrage vertical des divs
- 高洛峰original
- 2017-03-13 17:50:421327parcourir
Cet article présente principalement en détail les différentes méthodes de centrage vertical de p dans le didacticiel CSS, y compris la méthode de centrage vertical du texte multiligne. Les amis intéressés peuvent s'y référer
en parle quand il s'agit. à cette question, certaines personnes peuvent demander s'il existe un attribut vertical-align en CSS pour définir le centrage vertical ? Même si certains navigateurs ne le supportent pas, il me suffit de faire un peu de technologie CSS Hack ! Je dois donc dire quelques mots ici. Il existe bien un attribut d'alignement vertical en CSS, mais il ne prend effet que pour les éléments avec l'attribut valign dans l'élément (X)HTML, comme < dans ;td>, b4d429308760b6c2d20d6300079ed38e, 63bd76834ec05ac1f4c0ebbeaafb0994, etc. Des éléments comme e388a4556c0f65e1904146cc1a846bee, 45a2772a6b6107b401db3c9b82c049c2 n'ont pas d'attributs valign, donc l'utilisation de l'alignement vertical ne fonctionnera pas sur eux.
1. Centrage vertical sur une seule ligne
S'il n'y a qu'une seule ligne de texte dans un conteneur, il est relativement simple de la centrer. sa hauteur réellehauteur peut être égale à la hauteur de la ligne hauteur de la ligne.
Par exemple :
p {
height:25px;
line-height:25px;
overflow:hidden;
}Ce code est très simple. Le paramètre overflow:hidden est utilisé ultérieurement pour empêcher le contenu de dépasser le conteneur ou le retour à la ligne automatique, de sorte que le centrage vertical. l'effet ne peut pas être obtenu.
<!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. Centrage vertical d'un texte multiligne de hauteur inconnue
Si un élément de contenu , sa hauteur est variable, alors nous pouvons utiliser la dernière méthode utilisée pour obtenir un centrage horizontal mentionnée dans la section précédente, qui consiste à définir Padding de sorte que les valeurs de remplissage supérieure et inférieure soient les mêmes. Encore une fois, c'est une façon de "regarder" le centrage vertical, c'est juste une façon de faire en sorte que le texte remplisse complètement le e388a4556c0f65e1904146cc1a846bee. Vous pouvez utiliser un code similaire à celui-ci :
p {
padding:25px;
}L'avantage de cette méthode est qu'elle peut s'exécuter sur n'importe quel navigateur, et le code est très simple, mais la condition préalable à l'application de cette méthode est que la hauteur du conteneur doit être rétractable.
<!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;
}