Comment aligner a au milieu (horizontalement/largeur) de la page [dupliquer]

Question

Comment aligner a au milieu (horizontalement/largeur) de la page [dupliquer]

cette question a déjà une réponse ici:

comment centrer horizontalement un
? 90 réponses

j'ai une étiquette div avec width réglée à 800px . Lorsque la largeur du navigateur est supérieure à 800px , il ne pas étirer le div , mais cela doit l'amener au milieu de la page.

720

alignment center css html

demandé sur Sunil Garg 2009-06-05 05:44:38

27 réponses

score 969 · Answer 1

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

score 285 · Answer 2

position: absolute et ensuite 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 hauteur de la div I. le e-100 le déplace au-dessus de 100, de la même façon pour margin-left . Ceci met 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>

score 56 · Answer 3

moderne Flexbox la solution est la voie à suivre/à partir de 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>

score 55 · Answer 4

voulez-vous dire que vous voulez le centrer verticalement ou horizontalement? Vous avez dit que vous aviez spécifié le height à 800px, et que vous vouliez que la div ne s'étire pas quand le width était plus grand que cela...
pour centrer horizontalement, vous pouvez utiliser l'attribut margin: auto; dans css. De plus, vous devez vous assurer que les éléments body et html n'ont pas de marge ou de rembourrage:

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

score 36 · Answer 5

pour qu'il 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;
}

score 31 · Answer 6

<div></div>

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

score 25 · Answer 7

, Vous pouvez aussi l'utiliser comme ceci:

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

score 14 · Answer 8

utilisez simplement l'étiquette de Centre juste après l'étiquette de corps, et l'étiquette de Centre d'extrémité juste avant les extrémités de corps

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

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

score 12 · Answer 9

ajouter cette classe au div que vous voulez centré (qui devrait avoir une largeur définie):

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

Ou, ajouter la marge des trucs à votre div de classe, comme ceci:

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

score 11 · Answer 10

cela peut être facilement réalisé via un conteneur flexible.

.container{
 width: 100%;
 display: flex;
 height: 100vh;
 justify-content: center;
}

.item{
 align-self: center;
}

Aperçu Lien

score 10 · Answer 11

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

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

score 6 · Answer 12

quelques autres configurations préexistantes de l'ancien code qui empêchera le centrage de page div L & R sont: 1) autres classes cachées dans les liens externes de la feuille de style. 2) d'autres classes intégrées dans quelque chose comme un img (comme pour les contrôles externes plus anciens du format D'impression CSS). 3) le code de légende avec IDs et/ou CLASSES sera en conflit avec une classe div nommée.

score 5 · Answer 13

centrage sans spécifier la largeur de div:

body {
  text-align: center;
}

body * {
  text-align: initial;
}

body div {
  display: inline-block;
}

c'est quelque chose comme <center> tag does, excepté:

tous les directs inline childs éléments (par exemple. <h1> ) de <center> sera également placé au centre
inline-élément de bloc peut avoir des tailles différentes (comapred à display:block réglage) selon le navigateur par défaut

score 4 · Answer 14

body, html{
    display:table;
    height:100%;
    width:100%;
}
.container{
    display:table-cell;
    vertical-align:middle;
}
.container .box{
    width:100px;
    height:100px;
    background:red;
    margin:0 auto;

}

http://jsfiddle.net/NPV2E /

"width:100%" pour les "corps" de la balise c'est seulement par exemple. En projet réel, vous pouvez supprimer cette propriété.

score 4 · Answer 15

si vous avez un contenu régulier et pas seulement une ligne de texte, donc la seule raison possible que je sais Est de calculer la marge.

Voici un exemple:

HTML

<div id="supercontainer">
  <div id="middlecontainer">
    <div class="common" id="first">first</div>
    <div id="container">
      <div class="common" id="second">second</div>
      <div class="common" id="third">third</div>
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.common {
  border: 1px solid black;
}

#supercontainer {
  width: 1200px;
  background: aqua;
  float: left;
}

#middlecontainer {
  float: left;
  width: 104px;
  margin: 0 549px;
}

#container {
  float: left;
}

#first {
  background: red;
  height: 102px;
  width: 50px;
  float: left;
}

#second {
  background: green;
  height: 50px;
  width: 50px;
}

#third {
  background: yellow;
  height: 50px;
  width: 50px;
}

donc, #supercontainer est votre "whole page" et c'est width est 1200px .

#middlecontainer est div avec le contenu de votre site; il est width 102px . Dans le cas où, le width du contenu est connu, vous devez diviser la taille de la page à 2, et substruct à partir du résultat de la moitié du contenu width :

1200 / 2 - (102 / 2) = 549;

Oui, je suis aussi voir que c'est la DER GROSSE échec de la CSS.

score 4 · Answer 16

utiliser justify-content et align-items pour aligner horizontalement et verticalement un div

https://developer.mozilla.org/de/docs/Web/CSS/justify-content https://developer.mozilla.org/en/docs/Web/CSS/align-items

html,
body,
.container {
  height: 100%;
  width: 100%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mydiv {
  width: 80px;
}

<div class="container">
  <div class="mydiv">h & v aligned</div>
</div>

score 3 · Answer 17

cela fonctionne dans IE aussi, les marges automatiques ne le font pas.

.centered {
    position:           absolute;
    display:            inline-block;
    left:           -500px;
    width:          1000px;
    margin:             0 50%;
}

score 3 · Answer 18

Div centré verticalement et horizontalement à l'intérieur de parent sans fixer la taille du contenu

Check out cet exemple (clic) . Très simple, et fonctionne pour des hauteurs flexibles aussi. Parfait si vous ne vous contentez pas d'une hauteur fixe.

Et ici (clic) est un bon aperçu avec quelques autres solutions.

et ici (click) un autre exemple avec une solution de largeur flexible avec le fameux -50% trick

score 3 · Answer 19

Simple http://jsfiddle.net/8pd4qx5r /

html {
  display: table;
  height: 100%;
  width: 100%;
}

body {
  display: table-cell;
  vertical-align: middle;
}

.content {
  margin: 0 auto;
  width: 260px;
  text-align: center;
  background: pink;
}

score 3 · Answer 20

utilisez le code ci-dessous pour centrer la case div:

.box-content{
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    width: 800px;
    height: 100px;
    background-color: green;
}

<div class="box-content">
</div>

score 1 · Answer 21

.middle {
   margin: auto;
   text-align: center;
}

1

répondu KBH 2015-06-18 17:51:30

score 1 · Answer 22

si votre contenu de Centre est profond à l'intérieur d'autres divs alors seule marge peut vous sauver. Rien d'autre. Je l'affronte toujours quand je n'utilise pas framework comme Bootstrap.

score 1 · Answer 23

<body>
    <div style=" display: table; margin: 250 auto;">
        In center
    </div>
</body>

Si vous souhaitez modifier la position verticale, modifiez la valeur de 250 et vous pouvez organiser le contenu selon votre besoin. Il n'est pas nécessaire de donner la largeur et les autres paramètres.

score 1 · Answer 24

dans mon cas, la taille de l'écran du téléphone est inconnue, voici ce que j'ai fait.

HTML

<div class="loadingImg"></div>

CSS

.loadingImg{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999999;
    border:0;
    background: url('../images/loading.gif') no-repeat center;
    background-size: 50px 50px;
    display: block;
    margin: 0 auto;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

JS (avant que vous devez montrer cette DIV)

$(".loadingImg").css("height",$(document).height());     
$(".loadingImg").css("width",$(document).width());     
$(".loadingImg").show();

score 1 · Answer 25

<parent>
 <child>
 </child>
</parent>

parent { position: relative } enfant { position: absolute, à gauche: 50%, transformer: translateX(-50%) }

score 0 · Answer 26

Une jolie vieille question avec beaucoup de réponses, mais pour une raison quelconque n'a pas fonctionné pour moi, vraiment. C'est ce qui a fonctionné pour moi, et il fonctionne sur navigateur ainsi:

.center {
    text-align: center;
    height: 100%;
    /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;
    /* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;
    /* Internet Explorer 10 */
    display:-ms-flexbox;
    -ms-flex-pack:center;
    -ms-flex-align:center;
}

score 0 · Answer 27

obtenir la largeur de l'écran que faire marge gauche 25% marge de droite 25% de cette façon, le contenu de votre conteneur sera placé au milieu . exemple: supposons que la largeur du conteneur = 800px; <

div class='container' width='device-width' id='updatedContent'> 
<p id='myContent'></p
<contents></contents>
<contents></contents>
</div>
if($("#myContent").parent===$("updatedContent"))
{
$("#myContent").css({
'left':'-(device-width/0.25)px';
'right':'-(device-width/0.225)px';
});
}

Las etiquetas más populares

Comment aligner a au milieu (horizontalement/largeur) de la page [dupliquer]

27 réponses