CSS Avancées Div Positionnement. Center & Moyen
Je veux pour la position d'un <div>
- Vers le Centre avec w.r.t largeur du corps
- Au Milieu avec un "w".r.t la hauteur du corps
La div ont l'un de ces propriétés:
- largeur de
div
sera de 90% - hauteur de
div
auto, min. sera connu
Vous pouvez utilisez des marges(gauche,droite) de 5% à imiter l'effet de centrage de la largeur.
son le positionnement vertical qui est le problème
son le positionnement vertical qui est le problème
OriginalL'auteur Moon | 2010-12-27
Vous devez vous connecter pour publier un commentaire.
J'ai testé cela dans IE8, Firefox, Chrome. Il ne fonctionne pas dans IE7.
Si vous en avez besoin pour travailler dans <= IE7, j'imagine que la solution la plus simple serait de renoncer à de la pure CSS et javascript pour le positionnement vertical.
Démonstration En Direct
HTML:
CSS:
display: table
et consorts dans le CSS, je reçois des sentiments mitigés et je me demande toujours: "Pourquoi ne pas simplement utiliser un<table>
au lieu de tout ce gâchis?". Jusqu'où iriez-vous avec divitis?Qu'est ce qu'un
<table>
? 🙂OriginalL'auteur thirtydot
Vous pouvez la hauteur de centre comme ceci (attention à la compatibilité du navigateur).
Pour le centrage largeur: vous pouvez utiliser
position: absolute;
etleft: 50%;
, et leurmargin: -num;
. Dans la marge, remplacer num avec la moitié de la largeur de la div.OriginalL'auteur Nathan
Ensemble de la div avec cette. Je crois qu'il ne fonctionne pas sous IE 7 et inférieur. Terrible c'est à dire....
OriginalL'auteur Trevor
Vous pouvez utilisez des marges(gauche,droite) de 5% à imiter l'effet de centrage largeur.
Sur la hauteur de centrage, je ne sais pas la façon dont vous pouvez le faire avec du css en tête (à cause de l'inconnu taille verticale). Mais vous pouvez essayer d'utiliser javascript pour faire cela.
Voici un exemple: http://www.demtron.com/blog/post/2009/01/14/Centering-a-DIV-Window-with-Cross-Browser-JavaScript.aspx (vous pouvez ignorer la détection de la taille de la fenêtre de la partie).
OriginalL'auteur Hoàng Long