web-dev-qa-db-fra.com

Aligner un div au centre

Je veux flotter une div au centre. C'est possible? text-align: center ne fonctionne pas dans IE. 

htmlcssmargincenter-align
48
Chendur Pandian

Il n'y a pas de flotteur au centre en soi. Si vous souhaitez centrer un élément de bloc dans un autre, procédez comme suit:

<div id="outer">
  <div id="inner">Stuff to center</div>
</div>

avec:

#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }

Maintenant, cela ne fera pas que le texte s'enroule autour (comme avec un flottant à gauche ou à droite) mais comme je l'ai dit: il n'y a pas de centre de flottement.

73
cletus

Cela a toujours fonctionné pour moi.

Si vous définissez une largeur fixe pour votre DIV et le DOCTYPE approprié, essayez ceci.

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

J'espère que cela t'aides.

22
user1656346

La technique habituelle est margin:auto

Cependant, l'ancien IE ne le dit pas, donc on ajoute généralement text-align: center à un élément contenant externe. Vous ne penseriez pas que cela fonctionnerait, mais les mêmes IE qui ignorent auto appliquent également incorrectement le centre d'alignement du texte pour bloquer les éléments internes au niveau du bloc afin que les choses fonctionnent.

Et cela ne fait pas réellement un float.

11
DigitalRoss

La solution suivante a fonctionné pour moi.

  .algncenterdiv {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
5
Bikram Shrestha

divs flottants au centre "fonctionne" avec la combinaison de display: inline-block et text-align: center.

Essayez de changer la largeur de la div externe en redimensionnant la fenêtre de ce jsfiddle

<div class="outer">
    <div class="block">one</div>
    <div class="block">two</div>
    <div class="block">three</div>
    <div class="block">four</div>
    <div class="block">five</div>
</div>

et le css:

.outer {
    text-align:center;
    width: 50%;
    background-color:lightgray;
}

.block {
    width: 50px;
    height: 50px;
    border: 1px solid Lime;
    display: inline-block;
    margin: .2rem;
    background-color: white;
}
5
T. Philipp

L'un de mes sites Web implique une div dont la taille est variable et que vous ne saurez pas à l'avance. c'est une div externe avec 2 div imbriquées, la div externe a la même largeur que la première div imbriquée, qui est le contenu, et la seconde div imbriquée juste en dessous du contenu est la légende, qui doit être centrée. Parce que la largeur n'est pas connue, j'utilise jQuery pour ajuster en conséquence.

alors mon html est-ce

<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>

puis je centre les légendes dans jQuery comme ceci

captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");
4
chiliNUT

Utilisez "div" pour diviser le div que vous souhaitez centrer. Fonctionne mieux avec un design fluide. Assurez-vous de donner la hauteur aux entretoises, sinon elles ne fonctionneront pas.

<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>

<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>
3
Huuu

Cela a fonctionné pour moi ..

div.className {
display: inline-block;
margin: auto;
}
2
zeah

cela pourrait vous aider ..: D

div#outer {
  width:200px;
  height:200px;
  float:left;
  position:fixed;
  border:solid 5px red;
}
div#inner {
  border:solid 5px green;
}
<div id="outer">
  <center>
    <div id="inner">Stuff to center</div>
  </center>
</div>

1
adarsh mohan
<div id="outer" style="z-index:10000;width:99%;height:200px;margin-top:300px;margin-left:auto;margin-right:auto;float:left;position:absolute;opacity:0.9;">

<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>

Faites flotter la div en arrière-plan sur la largeur maximale, définissez une div à l'intérieur non transparente et centrez-la à l'aide de la marge auto.

0
prospector

Non ce n'est pas.

Vous pouvez avoir une bulle de contenu à droite d’un élément (float: left) ou à gauche d’un élément (float: right). Il n’est pas prévu de faire remonter la bulle de contenu des deux côtés.

0
Quentin

ça marche bien

width:40%; // the width of the content div
right:0;
margin-right:30%; // 1/2 the remaining space

Cela redimensionne bien avec les dispositions adaptatives aussi ..

Exemple CSS serait:

.centered-div {
   position:fixed;
   background-color:#fff;
   text-align:center;
   width:40%;
   right:0;
   margin-right:30%;
}
0
onux

Cela a fonctionné pour moi. 

J'ai inclus une liste non ordonnée sur ma page deux fois. Un div class = "menu" id = "vertical" l’autre à centrer était div class = "menu" id = "horizontal". Depuis que la liste a été laissée sur la gauche, il me fallait une division intérieure pour la centrer. Voir ci-dessous.

<div class=menu id="horizontal">
<div class="fix">
  Centered stuff
</div>
</div>

.menu#horizontal { display: block;  float: left; margin: 0px; padding: 0 10px; position: relative; left: 50%; }
#fix { float: right; position: relative; left: -50%; margin: 0px auto; }
0
Harry The Mad Lurker