Question Comment aligner un
au milieu (horizontalement / largeur) de la page


j'ai un div tag avec width mis à 800 px. Lorsque la largeur du navigateur est supérieure à 800 px, il ne devrait pas étirer le div mais il devrait l'amener au milieu de la page.


698
2018-06-05 01:44


origine


Réponses:


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

945
2018-06-05 01:49



position: absolute et alors top:50% et left:50% place le bord supérieur au centre vertical de l'écran, et le bord gauche au centre horizontal, puis en ajoutant margin-top à négatif de la hauteur de la div i.e -100 décale de 100, de même pour margin-left. Cela obtient div exactement au centre de la page.

#outPopUp {
  position: absolute;
  width: 300px;
  height: 200px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
  background: red;
}
<div id="outPopUp"></div>  


273
2018-05-29 07:55



  1. Voulez-vous dire que vous voulez le centrer verticalement ou horizontalement? Vous avez dit que vous avez spécifié height à 800px, et voulait que le div ne s'étire pas lorsque le width était plus grand que ça ...

  2. Pour centrer horizontalement, vous pouvez utiliser le margin: auto; attribut en css. De plus, vous devrez vous assurer que body et html les éléments n'ont aucune marge ni marge:

html, body { margin: 0; padding: 0; }
#centeredDiv { margin-right: auto; margin-left: auto; width: 800px; }

55
2018-06-05 01:47



Moderne Flexbox La solution est la voie à suivre depuis / vers 2015. justify-content: center est utilisé pour l'élément parent pour aligner le contenu au centre de celui-ci.

HTML

<div class="container">
  <div class="center">Center</div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 800px;
}

Sortie

.container {
  display: flex;
  justify-content: center;
}
.center {
  width: 800px;
  background: #5F85DB;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}
<div class="container">
  <div class="center">Centered div with left aligned text.</div>
</div>


51
2017-08-17 17:25



Pour que cela fonctionne aussi correctement dans Internet Explorer 6, vous devez le faire 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;
}

36
2018-06-05 07:54



<div></div>
div {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

31
2018-01-16 15:06



Vous pouvez également l'utiliser comme ceci:

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

25
2017-12-01 10:45



Il suffit d'utiliser l'étiquette centrale juste après l'étiquette du corps et l'étiquette centrale d'extrémité juste avant la fin du corps

<body>
<center>
........your code here.....
</center>
</body>

Cela a fonctionné pour moi avec tous les navigateurs que j'ai essayés


14
2018-05-11 10:45



Ajoutez cette classe à la div que vous voulez centrer (qui devrait avoir une largeur fixe):

.marginAutoLR
{
    margin-right:auto;
    margin-left:auto;
}

Ou, ajoutez les trucs de marge à votre classe div, comme ceci:

.divClass
{
    width:300px;
    margin-right:auto;
    margin-left:auto;
}

12
2018-02-10 16:16



Utilisation css flex propriété: http://jsfiddle.net/cytr/j7SEa/6/show/

body {                       /* centerized */
  display: box;
  flex-align: center;
  flex-pack: center;
}

11
2018-03-30 19:25