Vertical de centrage en CSS

Original: http://www.jakpsatweb.cz/css/css-vertical-center-solution.html



Solution définitive de Yuhu avec hauteur inconnue

Bien qu’il existe une propriété CSS vertical-align, ça ne fonctionne pas comme attribut valign dans des tableaux HTML. Propriété CSS vertical-align ne semble pas être en mesure de résoudre seul ce problème :
Définition du problème
  • Il y a une zone (par exemple <div>) avec une hauteur connue dans la page
  • un objet interne (généralement long texte en <div>) est à l’intérieur de la zone et je ne sais pas sa hauteur (par exemple parce que son contenu est généré dynamiquement d’une base de données)
  • Je veux centrer l’objet verticalement au sein de la zone
  • sans utiliser de tableaux HTML.
Aucune solution générale n’était connue jusqu’en septembre 2004. J’ai trouvé ça va de la maison sur la rue Wilson.

L’idée

La clé de voûte de la solution pour Internet Explorer 6, 7 ou mode bizarrerie est la suivante : l’objet interne est absolument placé dans la moitié de la hauteur de la zone. Alors est déplacé vers le haut de la moitié de sa hauteur. L’interprétation erronée de la propriété height dans plus vieux Internet Explorer est utilisée comme élément ici (hauteur compté est considérée comme une base de pourcentage hauteur de balises imbriquées). Une balise imbriquée extra <div>est nécessaire pour les explorateurs.
Solution pour les navigateurs standards comme Mozilla, Opera, Safari etc. (y compris IE 8, 9, 10 et plus jeunes) est complètement différente. Toute la zone (haut <div>) est définie sur Afficher sous forme de tableau (affichage : tableau ; partie de CSS2). L’objet interne est défini comme les cellules du tableau (Affichez : table-cell). Maintenantil y a l’idée cléeil est possible d’utiliser vertical-align propriété pour l’élément de ce type tableau-affiche dans les navigateurs standards. (Internet Exlorer 6, 7 et quirk mode ne tient pas compte de ces propriétés, ou ne sait pas leurs valeurs.)
Puis les deux syntaxe sont fusionnés. J’ai utiliser le hack de trait de soulignement de la Pixy, mais avec le signe #. Une propriété CSS rédigée avec le char # sur le début (c’est-à-dire #position) est visible pour IE 7 et plus. Ces biens écrites sont invisibles pour n’importe quel autre navigateur standard (par exemple Explorer 6 ou 7 interprète #position : absolue ; contrairement à d’autres navigateurs). Ce qu’on appelle « trait de soulignement hack » semble être valable, mais si vous ne voulez pas l’utiliser, vous pouvez utiliser le code plus structuré sous dans mon deuxième exemple (malheureusement, pas de travail pour IE 7). Autres types de navigateurs et de Internet Explorer 8 et moins n’avez pas besoin d’être piraté, car ils prennent en charge affichage : table-cell correctement.
Compatibilité
Le code ci-dessous fonctionne en version bêta de Internet Explorer 5.0, 5.5, 6.0, 7, 8, 9 et 10, dans les navigateurs basés sur Gecko (Mozilla, Firefox, Netscape 7), Opera 7, 8 et plus, chaque Chrome, Konqueror 3.3.1. (peut-être trop bas) et dans Safari (Win, iOS). La page peut être HTML, HTML5 ou XHTML, mode standard ou de bizarrerie.
L’exemple valide ne fonctionne pas en mode standard d’IE 7 (mise à jour 2012 : environ 3 % des clients). Si vous trouvez une solution facile pour IE 7, s’il vous plaît laissez-moi savoir.

Code compréhensible :

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”>
<html>
<head>
<title>Universal vertical center with CSS</title>
<style>
.greenBorder {border: 1px solid green;} /* just borders to see it */
</style>
</head>

<body>
<div class=”greenBorder” style=”display: table; height: 400px; #position: relative; overflow: hidden;“>
<div style=” #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;“>
<div class=”greenBorder” style=” #position: relative; #top: -50%“>
any text<br>
any height<br>
any content, for example generated from DB<br>
everything is vertically centered
</div>
</div>
</div>
</body>
</html>

Voir cet exemple dans le navigateur
Légende des couleurs :

CSS styles for every browser
CSS styles for standard browsers

CSS style only for Internet Explorer 6, 7 and quirk (with # hack)


Le résultat ressemble :

n’importe quel texte
n’importe quelle hauteur
tout contenu, produit par exemple de DB
tout est centré verticalement

Nous allons rendre structurelle et sans hacks

(NOTE : cette solution valide décrite ci-dessous ne fonctionne pas dans Internet Explorer 7 (mode standard), parce que IE7 ne comprend pas les valeurs de table dans affichent la propriété. L’objet centré est trop élevé. MAIS: IE 7 est utilisé par seulement 3 % des utilisateurs (2012) et le nombre va diminuer. Si vous avez encore esprit utilisateurs de IE7, s’il vous plaît utiliser la solution non valide ci-dessus, écrire en mode bizarrerie ou utiliser html des commentaires conditionnels pour séparer les propriétés pour IE 7 en quelque sorte.)
Le premier exemple ci-dessus n’est pas agréable, mais j’espère que vous l’avez compris. Il est possible d’écrire du code différemment. Par exemple, de cette façon :
<div id=”outer“>
<div id=”middle“>
<div id=”inner“>
any text
any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>
Et le style structuré valide :

<style type=”text/css”>
#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for quirk explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%; position: static;}

#inner {position: relative; top: -50%} /* for quirk explorer only */
/* optional: #inner[id] {position: static;} */
</style>

Voir l’exemple valide dans le navigateur (on dirait de la même façon que le dernier d’entre eux).
Légende couleur :

CSS style for Internet Explorer 6 only (or quirk)
CSS styles for standard browsers

Sélecteur de CSS2 #value [id] est équivalent au sélecteur #value, mais Internet Explorer 6 ne tient pas compte de ces types de sélecteurs avec [id]. Généralement : syntaxe * [foo] signifie tout élément avec attribut foo. Tout élément HTML #something doit avoir l’attribut id de la définition donnée à « quelque chose ». C’est le truc#value [id] fonctionne dans les navigateurs standard uniquement (de même travaux .value[class])
Il y a jeu de propriétés CSS position absolue ou relative pour Internet Explorer. La position de code : statiques get TI de la valeur par défaut dans les navigateurs standard (haut de la propriété ne fonctionne pas alors).

De centrage horizontal et vertical

Le code de base sera la même, vous avez juste besoin d’ajouter quelques règles CSS supplémentaires. Si votre page est en mode standard, ajoutez ce code :

<style>
#outer {width: 100%;}
#inner {width: 200px; margin-left: auto; margin-right: auto;}
</style>

Comme vous le verrez probablement, c’est la méthode la plus courante centrage horizontale auto marges gauche et droite. Parce que les marges a besoin de l’espace dans Firefox et Opera, vous devez affecter une largeur à la div. de #outer Si 100 % ne correspond à vos besoins, utilisez une autre valeur.
La chose importante est d’affecter une largeur correcte #inner. Ce tutoriel est d’environ de centrage vertical d’un objet avec hauteur inconnue. Je suppose que vous connaissez la largeur de l’objet (dans la plupart des cas que vous déciderez simplement comment large, il devrait être). Vous pouvez utiliser les valeurs des pixels, ou la pourcentage de largeur. Si l’objet centré est seulement une image de format inconnu, vous n’avez pas besoin de définir la largeur.
Si vous utilisez le rendu de page quirk mode (mode dépend !DOCTYPE, comme vous le savez), ajouté le code devrait être un peu plus longtemps, parce que ne comprend pas les marges auto mode bizarrerie de détonateur, mais a un joli bug dans text-align interprétation plutôt. Ce code devrait fonctionner pour le mode standard et Caprice :

<style>
#outer {width: 100%;}
#middle {width: 100%; text-align: center;}
#inner {width: 200px; margin-left: auto; margin-right: auto; text-align: left;}
</style>

Veuillez prendre note que ce n’est qu’une partie du code qui vous avez à ajouter à l’exemple précédent. Si vous êtes paresseux pour combiner les codes, veuillez voir l’exemple complet de navigateur : un centrage vertical et horizontal. Vous le savez, je suis paresseux trop.

Comment centrer verticalement sur la hauteur de la fenêtre

La même manière et juste ajouter le style :

<style>
body, html {height: 100%;}
#outer {height: 100%; overflow: visible;} /* or without overflow */
...
</style>

Il semble que #outer déclaration devrait suffire, mais il n’est pas. Déclaration de corps et html définit 100 % de la hauteur de la fenêtre comme une base pour la prochaine pourcentage. Maintenant, il est préférable de ne pas définir de débordement : caché (comme dans les exemples ci-dessus), parce que quand le contenu serait plus grand que la fenêtre, puis il serait impossible de faire défiler sur.

Associés

Tente de centrer verticalement :


Exemples :

Sur
Premier publié Sep 14, 2004, mis à jour le 23 octobre 2006 et le 25 mai 2008. Mise à jour majeure 6 décembre 2012 y compris correction du code dans l’exemple valide. Je mettrai à jour cet article avec plus d’informations si vous le souhaitez.
Auteur :
Dušan Janovský
aka Yuhu
Janovsky@gmail.com
De Prague, République tchèque, spécialiste d’algorithmes de recherche dans le moteur de recherche de Seznam.cz. Li Wi Tw Fb G +

Comments are closed.