Comment centrer horizontalement div à l'intérieur de div parent

114

Comment centrer un divhorizontalement à l'intérieur de son parent divavec CSS?

<div id='parent' style='width: 100%;'>
 <div id='child' style='width: 50px; height: 100px;'>Text</div>
</div>

html css Aigle
la source

1

Voici deux méthodes simples pour centrer les divs dans les divs, verticalement, horizontalement ou les deux (CSS pur): stackoverflow.com/a/31977476/3597276

Michael Benjamin

158

Je suppose que le div parent n'a pas de largeur ou une grande largeur, et le div enfant a une largeur plus petite. Ce qui suit définira la marge pour le haut et le bas à zéro, et les côtés pour s'adapter automatiquement. Cela centre le div.

div#child {
    margin: 0 auto;
}

Mark Embling
la source

@Marque. Savez-vous comment le faire fonctionner dans IE6? IE6 est vraiment nul, mais il y a encore des gens qui l'utilisent.

Bakhtiyor

@Bakhtiyor: pour autant que je me souvienne, c'est le cas. Quels problèmes voyez-vous? vous voudrez peut-être ouvrir une nouvelle question s'il y a un problème spécifique que vous rencontrez et qui n'a pas été abordé auparavant. Je n'ai pas accès à IE6 pour vérifier.

Mark Embling

3

@Bakhtiyor: après y avoir réfléchi, je pense que dans IE.old, vous devez également définir text-align: center;le parentdiv, puis le remettre à gauche (ou autre chose) pour celui- childci. Je ne sais pas si ce problème affecte IE6 ...

Mark Embling

@Mark & @Bakhtiyor pour une raison quelconque, ma childdiv apparemment décalée vers la gauche - par rapport aux navigateurs plus conformes aux normes - dans toutes les versions d'IE que j'ai vérifiées (IE6-8). Et text-align: center;pour le parentet text-align: left;pour le childcorrigé pour toutes ces versions.

brookmarker

8

<div id='parent' style='width: 100%;text-align:center;'>
 <div id='child' style='width:50px; height:100px;margin:0px auto;'>Text</div>
</div>

James Goodwin
la source

2

Cette solution prend en charge IE 6, mais n'oubliez pas d'ajouter text-align:left;à la div #child

Moak

1

text-align:centerà la div enfant ou à la div parent?

Anish Nair

6

Juste par intérêt, si vous souhaitez centrer deux divs ou plus (afin qu'ils soient côte à côte au centre), voici comment procéder:

<div style="text-align:center;">
    <div style="border:1px solid #000; display:inline-block;">Div 1</div>
    <div style="border:1px solid red; display:inline-block;">Div 2</div>
</div>

Paul Chris Jones
la source

4

Vous pouvez utiliser la valeur "auto" pour les marges gauche et droite pour permettre au navigateur de répartir également l'espace disponible des deux côtés du div intérieur:

<div id='parent' style='width: 100%;'>
   <div id='child' style='width: 50px; height: 100px; margin-left: auto; margin-right: auto'>Text</div>
</div>

x4u
la source

2

<div id='child' style='width: 50px; height: 100px; margin:0 auto;'>Text</div>

Soufiane Hassou
la source

Comment centrer horizontalement div à l'intérieur de div parent

Réponses: