HTML5 <div> centrée à l'intérieur de <body>
Est-il un moyen de placer une div à l'intérieur du corps, centré, avec de gauche à droite marges égale à x et de haut en bas marges, égal à y? Rien, à l'exception de la div (et ses enfants), est présenté dans le document.
Mise à JOUR. Je veux la suite:
Aussi, je serais content d'avoir un plus solution commune pour le cas, lorsque x1 != x2, y1 != y2 (bien qu'une solution pour mon cas particulier x1==x2, y1==y2 est appréciée).
Si margin-left et margin-right de l'élément div sont égaux, la div obtient centrée horizontalement. N'est-ce pas? Ou ai-je mal compris votre question? (Toutefois, lorsque l'élément div est positionné à la verticale dépend de la marge-haut.)
Oui, il est centré horizontalement et verticalement.
Oui, il est centré horizontalement et verticalement.
OriginalL'auteur noober | 2011-07-26
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser la correction du positionnement. Il ne fonctionnera pas dans IE6.
Le voir en action: http://obda.net/stackoverflow/position-fixed.html
OriginalL'auteur igor
Meilleure solution(?):
Ensemble margin-left et margin-right pour le div "auto"
OriginalL'auteur Volker Gaul
Le mieux que je puisse faire sans CSS3 est d'utiliser deux divs.
Vous pouvez le voir ici: http://jsfiddle.net/CatChen/VGpdv/4/
Mise à jour: Si CSS3 mise en œuvre est acceptable, il est beaucoup plus facile:
http://www.html5rocks.com/en/tutorials/flexbox/quick/#toc-center
Ensuite, il est beaucoup plus facile! Voir ceci: html5rocks.com/en/tutorials/flexbox/quick/#toc-center
Cela me donne de navigateur, les barres de défilement, en raison de la div parent de positionnement. Quelqu'un d'autre?
OriginalL'auteur Cat Chen
Vous devrez utiliser javascript si vous voulez que les marges soient les mêmes dans tous les browzers.
body { text-align: center; } .container { text-align: left; }
(nécessite que vous donnez à votre "main" div de classe "conteneur")Pourquoi serait - voulez pour faire cela? Ont pour, peut-être, mais voulez?
Cela ne semble pas fonctionner dans FireFox 5. Div hauteur de l'est juste assez pour contenir un contenu (une ligne de texte), n'est pas la hauteur du corps moins y * 2. Html: <html style="width:100%;height:100%;"> <head> <style> div { background-color:blue; } </style> </head> <body style="width:100%;height:100%; background-color:red;"> <div style="margin: 20px auto;padding: 0 30px;"> il suffit de contenu. </div> <body> </html>
Votre question a été mal définie, et que le javascript bloc auront probablement d'être appelé sur la fenêtre de redimensionnement
2Mimisbrunnr. La page est juste conçu de cette façon. Par un designer. C'est un plein écran de l'application web pour différentes tablettes avec des écrans différents. Néanmoins, toutes les marges doivent être les mêmes dans les pixels de partout. La question de la bonne cette conception ou pas, c'est hors-sujet pour moi.
OriginalL'auteur zellio