Plusieurs méthodes pour centrer verticalement les divs

Auteur：Eve Cole Date de mise à jour：2025-01-09 10:59:01

En parlant de ce problème, certaines personnes peuvent se demander : n'existe-t-il pas un attribut d'alignement vertical dans CSS pour définir le centrage vertical ? Même si certains navigateurs ne le supportent pas, il me suffit de faire un peu de CSS

La technologie du piratage suffit ! Je dois donc dire quelques mots ici. Il existe effectivement un attribut d'alignement vertical en CSS, mais il n'apparaît que pour les éléments qui ont l'attribut valign dans l'élément HTML (X).

Efficaces, tels que <td>, <th>, <caption>, etc. dans les éléments de table. Les éléments tels que <div> et <span> n'ont pas la fonctionnalité valign, donc l'alignement vertical ne peut pas être utilisé sur eux.

effet.

Tutoriel connexe : N façons de centrer un div horizontalement

1. Centrage vertical sur une seule rangée

S'il n'y a qu'une seule ligne de texte dans un conteneur, il est relativement simple de la centrer. Il suffit de définir sa hauteur réelle pour qu'elle soit égale à la hauteur de la ligne.

comme:

div{
hauteur : 25 px ;
hauteur de ligne : 25 px ;
débordement : caché ;
}
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 de provoquer un retour à la ligne automatique, de sorte que l'effet de centrage vertical ne puisse pas être obtenu. Plus d'enseignement CSS

Procédure.

2. Centrage vertical de plusieurs lignes de texte de hauteur inconnue

Si la hauteur d'un élément de contenu 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 le remplissage de manière à ce que les hauteurs supérieure et inférieure

Les valeurs de remplissagepeuvent être les mêmes. Encore une fois, il s'agit d'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 <div>. Vous pouvez utiliser quelque chose comme

Le code suivant :

div{
remplissage : 25 px ;
}
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 évolutive.

</corps>
</html>
3. Centrer un texte multiligne à hauteur fixe

Au début de cet article, nous avons dit que l'attribut vertical-align en CSS ne fonctionnerait que sur les balises (X)HTML avec des attributs valign, mais il y a aussi un affichage en CSS

L'attribut peut simuler <table>, nous pouvons donc utiliser cet attribut pour faire en sorte que <div> simule <table> et utiliser l'alignement vertical. Notez que display:table et

Comment utiliser display:table-cell, le premier doit être défini sur l'élément parent et le second doit être défini sur l'élément enfant, nous devons donc ajouter un autre élément <div> pour le texte qui doit être positionné :

div#envelopper {
hauteur : 400 px ;
affichage:tableau;
}
div#contenu {
alignement vertical : milieu ;
display:table-cellule;
bordure : 1px solide #FF0099 ;
couleur d'arrière-plan :#FFCCFF ;
largeur : 760 px ;
}

<!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">
<tête>
<title> Centrage vertical du texte multiligne</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
corps {taille de police: 12px; famille de polices: tahoma;}
div#envelopper {
hauteur : 400 px ;
affichage:tableau;
}
div#contenu {
alignement vertical : milieu ;
display:table-cellule;
bordure : 1px solide #FF0099 ;
couleur d'arrière-plan :#FFCCFF ;
largeur : 760 px ;
}
</style>
</tête>
<corps>
<div id="wrap">
<div id="content"><pre>Maintenant, nous voulons centrer ce texte verticalement ! Webjx.Com
div#envelopper {
hauteur : 400 px ;
affichage:tableau;
}
div#contenu {
alignement vertical : milieu ;
display:table-cellule;
bordure : 1px solide #FF0099 ;
couleur d'arrière-plan :#FFCCFF ;
largeur : 760 px ;
}
</pre></div>
</div>
</corps>
</html>
Cette méthode serait idéale, mais malheureusement Internet Explorer 6 ne comprend pas correctement display:table et display:table-cell, donc cette méthode est utilisée dans

Il n'est pas valide dans Internet Explorer 6 et versions antérieures. Eh bien, c'est déprimant ! Cependant, nous avons d'autres méthodes. 4. Solution dans Internet Explorer.

Dans Internet Explorer 6 et versions antérieures, il existe un défaut dans les calculs de hauteur. Après avoir positionné l'élément parent dans Internet Explorer 6, si vous positionnez ensuite l'élément enfant

Lors des calculs en pourcentage, la base de calcul semble héritée (si la valeur positionnée est une valeur absolue, il n'y a pas de problème, mais la base de calcul en pourcentage ne sera plus celle de l'élément)

hauteur, tandis que la hauteur de positionnement est héritée de l'élément parent). Par exemple, nous avons l’extrait de code (X)HTML suivant :

<div id="wrap">
<div id="subwrap">
<div id="content">
</div>
</div>
</div>
Si nous effectuons un positionnement absolu sur le sous-enveloppe, alors le contenu héritera également de cet attribut, même s'il ne sera pas affiché immédiatement sur la page, si le contenu est positionné davantage.

Lorsque les lignes sont positionnées les unes par rapport aux autres, le ratio de 100 % que vous utilisez ne correspondra plus à la hauteur d'origine du contenu. Par exemple, si nous définissons la position du sous-enveloppement à 40 %, si nous voulons que le contenu

Si le bord chevauche le wrap, top:-80% doit être défini ; alors, si nous définissons top:50% de subwrap, nous devons utiliser 100% pour ramener le contenu à sa position d'origine.

, mais et si nous fixions également le contenu à 50 % ? Ensuite, il est exactement centré verticalement. Nous pouvons donc utiliser cette méthode pour réaliser un centrage vertical dans Internet Explorer 6 :

div#envelopper {
bordure : 1px solide #FF0099 ;
couleur d'arrière-plan :#FFCCFF ;
largeur : 760 px ;
hauteur : 400 px ;
position : relative ;
}
div#subwrap {
position : absolue ;
bordure : 1px solide #000 ;
haut : 50 % ;
}
div#contenu {
bordure : 1px solide #000 ;
position : relative ;
haut : -50% ;
}
Bien entendu, ce code ne fonctionnera que dans les navigateurs présentant des problèmes informatiques tels qu'Internet Explorer 6. (Mais je ne comprends pas. J’ai consulté beaucoup d’articles et je ne sais pas si c’est à cause du

Sont-ils identiques ou pour une raison quelconque ? Il semble que beaucoup de gens ne soient pas disposés à expliquer le principe de ce bug dans Internet Explorer 6. Je n'ai qu'une compréhension superficielle et j'ai besoin de l'étudier plus en détail.)

<!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">
<tête>
<title> Centrage vertical du texte multiligne</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
corps {taille de police: 12px; famille de polices: tahoma;}
div#envelopper {
bordure : 1px solide #FF0099 ;
couleur d'arrière-plan :#FFCCFF ;
largeur : 760 px ;
hauteur : 400 px ;
position : relative ;
}
div#subwrap {
position : absolue ;
haut : 50 % ;
}
div#contenu {
position : relative ;
haut : -50% ;
}
</style>
</tête>
<corps>
<div id="wrap">
<div id="subwrap">
<div id="content"><pre>Maintenant, nous voulons centrer ce texte verticalement !
div#envelopper {
bordure : 1px solide #FF0099 ;
couleur d'arrière-plan :#FFCCFF ;
largeur : 760 px ;
hauteur : 500 px ;
position : relative ;
}
div#subwrap {
position : absolue ;
bordure : 1px solide #000 ;
haut : 50 % ;
}
div#contenu {
bordure : 1px solide #000 ;
position : relative ;
haut : -50% ;
</pre>
</div>
</div>
</div>
</corps>
</html>
5. La solution parfaite

Ensuite, nous pouvons obtenir une solution parfaite en combinant les deux méthodes ci-dessus, mais cela nécessite la connaissance du hack CSS. Pour utiliser CSS Hack pour distinguer les navigateurs, vous pouvez

Veuillez vous référer à ce « Hack CSS simple : différencier IE6, IE7, IE8, Firefox, Opera » :

div#envelopper {
affichage:tableau;
bordure : 1px solide #FF0099 ;
couleur d'arrière-plan :#FFCCFF ;
largeur : 760 px ;
hauteur : 400 px ;
_position:relative;
débordement : caché ;
}
div#subwrap {
alignement vertical : milieu ;
display:table-cellule;
_position : absolue ;
_haut : 50 % ;
}
div#contenu {
_position:relative;
_haut:-50%;
}
À ce stade, une solution de centrage parfaite est créée.

<!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">
<tête>
<title> Centrage vertical du texte multiligne</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
corps {taille de police: 12px; famille de polices: tahoma;}
div#envelopper {
affichage:tableau;
bordure : 1px solide #FF0099 ;
couleur d'arrière-plan :#FFCCFF ;
largeur : 760 px ;
hauteur : 400 px ;
_position:relative;
débordement : caché ;
}
div#subwrap {
alignement vertical : milieu ;
display:table-cellule;
_position : absolue ;
_haut : 50 % ;
}
div#contenu {
_position:relative;
_haut:-50%;
}
</style>
</tête>
<corps>
<div id="wrap">
<div id="subwrap">
<div id="content"><pre>Maintenant, nous voulons centrer ce texte verticalement !
div#envelopper {
bordure : 1px solide #FF0099 ;
couleur d'arrière-plan :#FFCCFF ;
largeur : 760 px ;
hauteur : 500 px ;
position : relative ;
}
div#subwrap {
position : absolue ;
bordure : 1px solide #000 ;
haut : 50 % ;
}
div#contenu {
bordure : 1px solide #000 ;
position : relative ;
haut : -50% ;
</pre>
</div>
</div>
</div>
</corps>
</html>
ps La valeur du centrage vertical vertical-align est au milieu, tandis que la valeur du centrage horizontal align est center Bien qu'ils soient tous deux centrés, les mots-clés sont différents.