Comment aligner un <div> au milieu de la page

Question

Comment aligner un <div> au milieu de la page

Demandé el 5 de Juin, 2009: Quand la question a-t-elle été
667979 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Cette question a déjà des réponses:

Comment horizontalement centre d'une div dans une div? (5 réponses )

J'ai une balise div dont la largeur est fixée à 800px. Lorsque la largeur du navigateur est supérieure à 800px, la balise div ne doit pas être étirée, mais elle doit être placée au milieu de la page.

Demandé el 5 de Juin, 2009 par Shimmy

Answer 1

5 Réponses

Answer 2

1170voto

AgileJon Points 20497

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

Répondu el 5 de Juin, 2009 par AgileJon (20497 Points )

Answer 3

330voto

Summo Points 839

Position absolute, puis top:50% et left:50% placent le bord supérieur au centre vertical de l'écran, et le bord gauche au centre horizontal. Ensuite, en ajoutant margin-top au négatif de la hauteur de la division, c'est-à-dire -100, on la décale de 100 au-dessus, de même pour margin-left. Ainsi, la division se trouve exactement au centre de la page.

<div id="outPopUp"></div>

#outPopUp{
     position:absolute;
     width:300px;
     height:200px;
     z-index:15;
     top:50%;
     left:50%;
     margin:-100px 0 0 -150px;
     background:red;
}

Répondu el 29 de Mai, 2012 par Summo (839 Points )

Answer 4

65voto

Tomas Lycken Points 23432

Voulez-vous dire que vous voulez le centrer verticalement ou horizontalement ? Vous avez dit que vous avez spécifié le height à 800px, et je voulais que le div ne s'étire pas lorsque le width était plus grande que ça...
Pour un centrage horizontal, vous pouvez utiliser la fonction margin: auto; en css. Vous devrez également vous assurer que l'attribut body et html n'ont pas de marge ni de padding :
```
html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }
```

Répondu el 5 de Juin, 2009 par Tomas Lycken (23432 Points )

Answer 5

39voto

Kevin D. Points 987

Pour qu'il fonctionne aussi correctement dans Internet Explorer 6, vous devez procéder comme suit :

HTML

<body>
    <div class="centered">
        centered content
    </div>
</body>

CSS

body {
    margin: 0;
    padding: 0;
    text-align: center; /* !!! */
}

.centered {
    margin: 0 auto;
    text-align: left;
    width: 800px;
}

Répondu el 5 de Juin, 2009 par Kevin D. (987 Points )

Answer 6

30voto

RJK Points 1661

Vous pouvez aussi utiliser comme ceci

<div style="width: 60%; margin: 0px auto;">
         Your Contents Here...
</div>

J'espère que cela pourra être utile à quelqu'un,

Répondu el 1 de Décembre, 2012 par RJK (1661 Points )

Comment aligner un <div> au milieu de la page

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Comment aligner un &lt;div&gt; au milieu de la page

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by:

Comment aligner un <div> au milieu de la page