Aller au contenu

centrer un <div> au milieu de l'écran (pas de la page)


JoP

Sujets conseillés

Bonjour à tous!

J'espère que vous allez tous bien!

Voilà! J'aimerais centrer un <div> au centre de l'écran, et non de la page...

J'ai beaucoup cherché sur google, mais sans succès.. et je vous avoue que je ne sais même pas si ca se fait uniquement en CSS ou bien si ca inclus l'usage de javascrit...

J'aimerais bien avoir votre aide sur ce sujet, juste une direction à prendre..

Merci d'avance..

Lien vers le commentaire
Partager sur d’autres sites

Je suppose que tu veux dire que tu veux le centrer dans la fenêtre :-)

Pour ça, la solution "pur CSS" c'est de faire un div en position: fixed avec top, left, bottom et right à 0, et mettre dedans un deuxième div en position: absolute, aux dimensions voulues, avec des margin: auto et top, left, bottom et right à 0.


<div style="position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: red; border: solid 1px black">
<div style="position: absolute; width: 400px; height: 300px; top:0; bottom:0; left:0; right: 0; margin: auto; background: blue; border: solid 1px black">
Blah
</div>
</div>

Il y a peut-être plus simple, mais ça en tous cas ça marche. Attention: il faut que les dimensions de la boîte à centrer soient fixes, sinon ça ne marche pas.

Jacques.

Lien vers le commentaire
Partager sur d’autres sites

Merci beaucoup!!

C'est ce que je cherchais, mais j'aimerais, si c'est possible que le <div> ne suive pas le "scroll" de la page..

Merci encore!

Lien vers le commentaire
Partager sur d’autres sites

quand je change le position: fixed pour position: absolute, mon <div> se cale en haut de la page.

Pour etre plus précit, mon <div> s'ouvre à l'aide d'une fonction javascript et j'aimerais que losrque le <div> est affiché, qu'il reste où il s'est ouvert et qu'il ne se déplace pas quand on scroll la page..

Merci encore

Lien vers le commentaire
Partager sur d’autres sites

C'est ce que fait le code que je t'ai donné, non?

Jacques.

le code centre bien le <div> au milieu de la fenêtre, mais lorsque je scroll la page, le <div> suit (c'est a dire qu'il reste toujours au milieu de la fenêtre), et moi je voudrais qu'il reste toujours à la même place, c'est à dire qu'il ne bouge pas lors du scroll

merci encore

Lien vers le commentaire
Partager sur d’autres sites

Tu as bien gardé tous les bouts que j'ai donnés, en particulier le position: fixed sur le div externe? A part les background et color évidemment :-) Tu as bien ce code juste après le <body>? Ce n'est normalement pas indispensable, mais ça peut éviter des surprises. Tu as passé l'ensemble de ta page au validateur W3C pour vérifier qu'il n'y avait pas de problèmes de syntaxe qui pourraient affecter la mise en page?

Avec le code que je t'ai donné, le div externe est forcément calé sur la fenêtre (c'est le but du position: fixed, par opposition à un position: absolute qui le calerait par rapport à la page), et le div interne est calé par rapport à ce div externe.

J'ai testé ce code avec IE, FF et Opera et ça fait bien ce qui est prévu: le div interne ne bouge pas d'un poil quand tu scrolles.

Jacques.

Lien vers le commentaire
Partager sur d’autres sites

j'ai gardé tout les bouts que tu m'as donnés. Mais ça ne fait pas ce que je veux. Lorsque je fais défiler la page, le div reste toujours au milieu de la fenêtre, c'est-à-dire que le contenu défile derrière le div, mais je voudrais que le div défile avec le contenu.

Merci encore

Jonathan

Lien vers le commentaire
Partager sur d’autres sites

oui, j'ai une version en ligne: Cliquez-ici!

ne regardez pas trop le design, on ne fait que commencer..

pour voir le div que je suis en train de faire: descendez jusqu'à la section "vidéos" et cliquez sur "voir le vidéo"

merci encore!

Jonathan

Lien vers le commentaire
Partager sur d’autres sites

Sinon, propriétés CSS toutes simples :

- margin-left: auto;

- margin-right: auto;

Mais attention, pour qu'elles fonctionnent, l'élément en question doit avoir une largeur (width) spécifiée.

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...