Utilisation de jQuery pour centrer une DIV sur l'écran
Comment puis-je aller sur la configuration d'un <div>
dans le centre de l'écran à l'aide de jQuery?
- Ce n'est plus un CSS question que jQuery question. Vous pouvez utiliser les méthodes jQuery pour vous aider à trouver la croix-navigateur de positionnement et d'appliquer le bon styles CSS à un élément, mais l'essence de la question est comment faire pour centrer une div sur l'écran à l'aide de CSS.
- Ici est un autre plugin. alexandremagno.net/jquery/plugins/center
- Si vous centrer une div sur l'écran, vous pouvez peut-être l'aide d'correction du positionnement. Pourquoi ne pas simplement faire ceci: stackoverflow.com/questions/2005954/.... La solution est de la pure CSS, n'a pas besoin de javascript.
- D'accord, méthode JavaScript n'est-ce pas sympathique du tout. En particulier croix-navigateur.
Vous devez vous connecter pour publier un commentaire.
J'ai comme l'ajout de fonctions de jQuery donc cette fonction permettrait de:
Maintenant, il nous suffit d'écrire:
Démo: Violon (avec ajout de paramètre)
<div>
au lieu de<body>
? Peut-être que vous devriez changer dewindow
àthis.parent()
ou ajouter un paramètre pour elle.- (this.outerHeight() / 2)
+ $(window).scrollTop()
et+ $(window).scrollLeft()
. (Et, bien sûr, changer"absolute"
à"fixed"
).J'ai mis un plugin jquery ici
TRÈS COURTE VERSION
VERSION COURTE
Activé par le présent code :
PLUGIN VERSION
Activé par le présent code :
est ce que le droit ?
Mise à JOUR :
De CSS-Tricks
Je recommanderais jQueryUI Position de l'utilitaire
qui vous donne beaucoup plus de possibilités que de centrage ...
Voici mon aller à elle. J'ai fini de l'utiliser pour mon Lightbox clone. Le principal avantage de cette solution est que l'élément restera centré automatiquement, même si la fenêtre est redimensionnée, le rendant idéal pour ce genre d'utilisation.
$(window).resize(function(){$('#mydiv').center()});
(mydiv est une boîte de dialogue modale, donc, quand il est fermé, j'ai supprimer le redimensionner gestionnaire d'événements).outerWidth()
etouterHeight()
à envisager de rembourrage et de la largeur de la bordure.$(window).height()
donne 0. Mais j'ai changé de position "absolute".Vous pouvez utiliser les CSS seul au centre de la sorte:
Exemple De Travail
CSS:
HTML:
calc()
vous permet de faire des calculs de base en css.MDN Documentation de
calc()
Prise en charge du navigateur table
Je suis en expansion sur la grande réponse donnée par @TonyL. Je suis ajoutant des Mathématiques.abs() pour envelopper les valeurs, et aussi, je prends en compte que jQuery peut-être dans "pas de conflit" mode, comme par exemple dans WordPress.
Je recommande que vous enveloppez-le haut et à gauche de valeurs avec les Mathématiques.abs() comme je l'ai fait ci-dessous. Si la fenêtre est trop petite, et votre boîte de dialogue modale a une case de fermeture en haut, cela permettra d'éviter le problème de ne pas voir la case de fermeture. Tony fonction aurait eu potentiellement des valeurs négatives. Un bon exemple sur la façon dont vous vous retrouvez avec des valeurs négatives est si vous avez un grand centrée dialogue, mais l'utilisateur a installé plusieurs barres d'outils et/ou une augmentation de sa police par défaut -- dans ce cas, la case de fermeture sur une boîte de dialogue modale (si en haut) peut ne pas être visible et cliquable.
L'autre chose que je fais est de la vitesse un peu par la mise en cache de l' $(window) de l'objet, de sorte que je réduire extra DOM traversals, et j'utilise un cluster CSS.
À utiliser, vous feriez quelque chose comme:
oWin
au lieu dew
est une faute de frappe...if (top < w.scrollTop()) top = w.scrollTop();
avec l'équivalent pour la gauche. Encore une fois, cela donne un comportement différent qui peut, ou peut ne pas être souhaitable.Je voudrais utiliser le jQuery UI
position
fonction.Voir le travail de démonstration.
Si j'ai un div avec l'id "test" pour le centre puis le script suivant serait le centre de la div dans la fenêtre de document prêt. (les valeurs par défaut pour "mon" et "à" dans les options de position sont "centre")
Je voudrais corriger un problème.
Code ci-dessus ne fonctionne pas dans les cas où
this.height
(permet de supposer que l'utilisateur redimensionne l'écran et le contenu est dynamique) etscrollTop() = 0
, exemple:window.height
est600
this.height
est650
Maintenant, la boîte est centrée
-25
à l'écran.Je ne pense pas avoir une position absolue serait mieux si vous souhaitez qu'un élément soit toujours centré dans le milieu de la page. Vous voulez probablement un élément fixe. J'ai trouvé un autre jquery centrage plugin utilisé correction du positionnement. Il est appelé centre fixe.
Ce n'est pas testée, mais quelque chose comme cela devrait fonctionner.
La transition de la composante de cette fonction a vraiment très mal pour moi en Chrome (n'ai pas testé d'ailleurs). Je voudrais redimensionner la fenêtre, un bouquet et mon élément en sorte de scoot autour lentement, en essayant de se rattraper.
Donc la fonction suivante commentaires cette partie. En outre, j'ai ajouté les paramètres pour passer en option x & y booléens, si vous voulez centrer verticalement, mais non pas à l'horizontale, par exemple:
Au centre de l'élément par rapport à la fenêtre d'affichage du navigateur (fenêtre), ne pas utiliser de
position: absolute
, la position correcte de la valeur doit êtrefixed
(absolu signifie: "L'élément est positionné par rapport à sa première positionné (non statique) élément ancêtre").Cette version alternative du projet de centre de plugin utilise "%" au lieu de "px" donc, lorsque vous redimensionnez la fenêtre le contenu, c'est de rester centré:
Vous avez besoin de mettre
margin: 0
d'exclure le contenu des marges à partir de la largeur/hauteur (puisque nous sommes à l'aide de position fixe, ayant des marges n'a pas de sens).Selon la doc jQuery en utilisant
.outerWidth(true)
devrait inclure les marges, mais il ne fonctionne pas comme prévu lorsque j'ai essayé dans google Chrome.La
50*(1-ratio)
vient de:La Largeur De La Fenêtre:
W = 100%
Élément Largeur (en %):
w = 100 * elementWidthInPixels/windowWidthInPixels
À calcule le centré de gauche:
Ce qui est excellent. J'ai ajouté une fonction de rappel
Edit:
Si la question m'a appris une chose, c'est ceci: ne pas changer quelque chose qui fonctionne déjà 🙂
Je suis fournissant une (presque) copie exacte de la façon dont cela a été traité sur http://www.jakpsatweb.cz/css/css-vertical-center-solution.html - c'est largement piraté pour IE, mais fournit un pur CSS façon de répondre à la question:
Violon: http://jsfiddle.net/S9upd/4/
J'ai rencontré par ce biais browsershots et il semble très bien; si rien d'autre, je vais garder l'original ci-dessous, de sorte que la marge en pourcentage de la manipulation comme dicté par la CSS voit la lumière du jour.
Original:
Regarde comme je suis en retard à la fête!
Il y a quelques commentaires ci-dessus suggèrent que c'est un CSS question de la séparation des préoccupations et de toutes les. Permettez-moi de commencer en disant que CSS vraiment balle dans le pied sur celui-ci. Je veux dire, comment serait-il facile de le faire:
Droit? Conteneur coin en haut à gauche serait au centre de l'écran, et avec des marges négatives le contenu va réapparaître comme par magie dans le centre absolu de la page! http://jsfiddle.net/rJPPc/
Mal! Positionnement Horizontal est OK, mais à la verticale... Oh, je vois. Apparemment, dans le css, lors de la configuration de haut marges en %, la valeur est calculée comme un pourcentage toujours par rapport à la width du bloc contenant. Comme les pommes et les oranges! Si vous n'avez pas confiance en moi ou Mozilla doco, avoir un jeu avec le violon ci-dessus en ajustant le contenu de largeur et être surpris.
Maintenant, avec le CSS de mon pain et le beurre, je n'étais pas sur le point d'abandonner. En même temps, je préfère les choses plus faciles, j'ai donc emprunté les résultats d'une Tchèque gourou CSS et en a fait un travail de violon. Longue histoire courte, nous avons créer un tableau dans lequel vertical-align est défini sur moyen:
Et que le contenu du poste est affiné avec le bon vieux margin:0 auto;:
De travail violon comme promis: http://jsfiddle.net/teDQ2/
Que j'ai ici est un "centre" de la méthode qui garantit que l'élément que vous tentez de centre n'est pas seulement de "fixe" ou "absolue" de positionnement, mais aussi d'assurer que l'élément de centrage est plus petit que son parent, ce centres et de l'élément parent est un parent, si les éléments parent est plus petit que l'élément lui-même, il va piller les DOM pour le prochain parent, et le centrer par rapport à ça.
j'utilise ceci:
Veuillez utiliser ceci:
vous êtes de plus que la mauvaise transition parce que vous êtes le réglage de la position de l'élément à chaque fois que le document défile. Ce que vous voulez est d'utiliser la correction du positionnement. J'ai essayé centre fixe plugin énumérés ci-dessus et qui semble faire de résoudre le problème joliment. Correction du positionnement permet de centrer un élément à la fois, et la propriété CSS va prendre soin de maintenir cette position pour vous chaque fois que vous faites défiler.
Voici ma version. Je peut le changer après je regarde ces exemples.
Pas besoin de jquery pour cette
J'ai utilisé ce pour centre de l'élément Div.
De Style Css,
Élément ouvert
MA MISE À JOUR À TONY L LA RÉPONSE DE
C'est la dernier version de sa réponse que j'utilise religieusement maintenant. J'ai pensé que je voudrais partager, car il ajoute un peu plus de la fonctionnalité pour les diverses situations que vous pourriez avoir, comme les différents types de
position
ou ne voulant horizontal/vertical de centrage plutôt que deux.center.js:
Dans mon
<head>
:Exemples d'utilisation:
Il fonctionne avec n'importe quel positionnement type, et peut être utilisé tout au long de l'ensemble de votre site facilement et facilement portable sur tout autre site que vous créez. Pas plus gênant que des solutions de contournement pour le centrage quelque chose correctement.
Espère que ce sera utile pour quelqu'un là-bas! Profitez de.
Beaucoup de façons de le faire. Mon objet est caché avec display:none juste à l'intérieur de la balise BODY, de sorte que le positionnement par rapport au CORPS. Après l'utilisation de $("#object_id").show(), j'appelle $("#object_id").centre()
- Je utiliser position:absolute parce que c'est possible, surtout sur un petit appareil mobile, que la fenêtre modale est plus grande que la fenêtre de l'appareil, auquel cas certains modes de contenu pourrait être inaccessible si le positionnement a été fixé.
Voici mon goût sur la base d'autres réponses et mes besoins spécifiques:
Normalement, je le ferai avec CSS... mais puisque vous le demandez vous un moyen de le faire avec jQuery...
Le code suivant centres un div à la fois horizontalement et verticalement à l'intérieur de son conteneur :
JS:
CSS:
HTML:
(voir aussi ce Violon)
CSS solution
En deux lignes seulement
Il centralisez votre intérieur div horizontalement et verticalement.
}
pour seulement alignement horizontal, changement
et verticale, changement
Vous pouvez utiliser le CSS
translate
propriété:Lire ce post pour plus de détails.
left: 50%
ettop: 50%
ensuite, vous pouvez utiliser la transformation traduire de déplacer son centre plus correctement. Cependant, avec cette méthode, les navigateurs tels que Chrome va déformer/flou de votre texte par la suite, ce qui n'est généralement pas souhaitable. Il est préférable de saisir la largeur/hauteur de la fenêtre, puis placez le à gauche/en haut fondée sur ce que, au lieu de vous embêter avec la transformation. Évite la distorsion et fonctionne sur tous les navigateurs que j'ai testé sur.Pourquoi ne pas utiliser les CSS pour centrer un div?