web-dev-qa-db-fra.com

Comment aligner 3 divs (gauche / centre / droite) dans un autre div?

Je veux avoir 3 div alignés à l'intérieur d'un conteneur div, quelque chose comme ceci:

[[LEFT]       [CENTER]        [RIGHT]]

Container div est 100% large (pas de largeur définie), et div div doit rester au centre après le redimensionnement du conteneur.

Alors j'ai mis:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

Mais cela devient:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

Des conseils?

htmlcssflexboxalignmentcss-float
365
serg

Avec ce CSS, placez vos divs comme suit (les flotteurs en premier):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

P.S. Vous pouvez également flotter à droite, puis à gauche, puis au centre. La chose importante est que les flotteurs viennent avant la section centrale "principale".

PPS Vous voulez souvent le dernier à l'intérieur de #container cet extrait: <div style="clear:both;"></div> qui étendra #container verticalement pour contenir les deux flotteurs latéraux au lieu de prendre sa hauteur uniquement de #center et en laissant éventuellement les côtés dépasser du bas.

344
dkamins

Si vous ne souhaitez pas modifier votre structure HTML, vous pouvez également le faire en ajoutant text-align: center; à l'élément wrapper et un display: inline-block; à l'élément centré.

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

Démo en direct: http://jsfiddle.net/CH9K8/

119
fruechtemuesli

Alignement horizontal de trois divisions à l'aide de Flexbox

Voici une méthode CSS3 pour aligner les div horizontalement dans un autre div.

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

jsFiddle

La propriété justify-content prend cinq valeurs:

  • flex-start (par défaut)
  • flex-end
  • center
  • space-between
  • space-around

Dans tous les cas, les trois div sont sur la même ligne. Pour une description de chaque valeur, voir: https://stackoverflow.com/a/33856609/3597276

Avantages de la flexbox:

  1. code minimal; très efficace
  2. le centrage, à la fois verticalement et horizontalement, est simple et facile
  3. les colonnes de hauteur égale sont simples et faciles
  4. plusieurs options pour aligner les éléments flexibles
  5. c'est réactif
  6. contrairement aux flottants et aux tables, qui offrent une capacité de disposition limitée car ils n'ont jamais été conçus pour la construction de bâtiments, flexbox est une technique moderne (CSS3) avec un large éventail d'options.

Pour en savoir plus sur flexbox, visitez:

Prise en charge du navigateur: Flexbox est pris en charge par tous les principaux navigateurs, - sauf IE <1 . Certaines versions de navigateur récentes, telles que Safari 8 et IE10, nécessitent préfixes du fournisseur . Pour ajouter rapidement des préfixes, utilisez Autoprefixer . Plus de détails dans cette réponse .

105
Michael_B

La propriété Float n'est en fait pas utilisée pour aligner le texte.

Cette propriété est utilisée pour ajouter un élément à droite, à gauche ou au centre.

div > div { border: 1px solid black;}
<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>

pour float:left la sortie sera [First][second][Third]

pour float:right la sortie sera [Third][Second][First]

Cela signifie que float => left property ajoutera votre prochain élément à la gauche du précédent, Même cas avec right

Vous devez également tenir compte de la largeur de l'élément parent. Si la somme des largeurs des éléments enfants dépasse la largeur de l'élément parent, l'élément suivant sera ajouté à la ligne suivante.

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>

[Première seconde]

[Troisième]

Vous devez donc prendre en compte tous ces aspects pour obtenir le résultat parfait

19
Rajiv Pingale

J'aime mes barres serrées et dynamiques. Ceci est pour CSS 3 & HTML 5

  1. Premièrement, régler la largeur sur 100 px est limitant. Ne le fais pas.

  2. Deuxièmement, définir la largeur du conteneur sur 100% fonctionnera correctement jusqu'à ce que vous parliez de l'en-tête/du pied de page de l'application entière, comme une barre de navigation ou de crédits/de droits d'auteur. Utilisez right: 0; à la place pour ce scénario.

  3. Vous utilisez des identifiants (hash #container, #left, etc.) au lieu de classes (.container, .left, etc.), ce qui est correct, sauf si vous souhaitez répéter votre style. motif ailleurs dans votre code. J'envisagerais d'utiliser des cours à la place.

  4. Pour HTML, il n'est pas nécessaire de permuter la commande pour: gauche, centre et droite. display: inline-block; résout ce problème en remettant votre code dans un état plus propre et plus logique.

  5. Enfin, vous devez effacer tous les flotteurs pour ne pas gâcher le futur <div>. Vous faites cela avec le clear: both;

Résumer:

HTML:

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
  <div class="clear"></div>
</div>

CSS:

.container {right: 0; text-align: center;}

.container .left, .container .center, .container .right { display: inline-block; }

.container .left { float: left; }
.container .center { margin: 0 auto; }
.container .right { float: right; }
.clear { clear: both; }

Point bonus si vous utilisez HAML et SASS;)

HAML:

.container
  .left
  .center
  .right
  .clear

TOUPET:

.container {
  right: 0;
  text-align: center;

  .left, .center, .right { display: inline-block; }

  .left { float: left; }
  .center { margin: 0 auto; }
  .right { float: right; }
  .clear { clear: both; }
}
13
Eric Wanchic

Plusieurs astuces sont disponibles pour aligner les éléments.

1. Utiliser Table Trick

.container{
  display:table;
 }

.left{
  background:green;
  display:table-cell;
  width:33.33vw;
}

.center{
  background:gold;
  display:table-cell;
  width:33.33vw;
}

.right{
  background:gray;
  display:table-cell;
  width:33.33vw;
}
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

2. Utilisation de Flex Trick

.container{
  display:flex;
  justify-content: center;
  align-items: center;
   }

.left{
  background:green;
  width:33.33vw;
}

.center{
  background:gold;
   width:33.33vw;
}

.right{
  background:gray;
   width:33.33vw;
}
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

. Utiliser le flotteur

.left{
  background:green;
  width:100px;
  float:left;
}

.center{
   background:gold;
   width:100px;
   float:left;
}

.right{
   background:gray;
   width:100px;
   float:left;
}
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>
12
Santosh Khalse

Cela peut être facilement fait en utilisant la CSS3 Flexbox, une fonctionnalité qui sera utilisée dans le futur (Quand <IE9 sera complètement mort) par presque tous les navigateurs.

Consultez la table de compatibilité du navigateur

HTML

<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

Sortie: 

.container {
  display: flex;
  flex-flow: row nowrap; /* Align on the same line */
  justify-content: space-between; /* Equal margin between the child elements */
}

/* For Presentation, not needed */

.container > div {
  background: #5F85DB;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  font-family: Tahoma;
}
<div class="container">
  <div class="left">
    Left
  </div>
  <div class="center">
    Center
  </div>
  <div class="right">
    Right
  </div>
</div>
8
Manoj Kumar

Avec Twitter bootstrap:

<p class="pull-left">Left aligned text.</p>
<p class="pull-right">Right aligned text.</p>
<p class="text-center">Center aligned text.</p>
4
Ka.

réponse possible, si vous voulez conserver l’ordre du code HTML et ne pas utiliser flex.

HTML

<div class="a">
  <div class="c">
    the 
  </div>
  <div class="c e">
    jai ho 
  </div>
  <div class="c d">
    watsup
  </div>
</div>

CSS

.a {
  width: 500px;
  margin: 0 auto;
  border: 1px solid red;
  position: relative;
  display: table;
}

.c {
  display: table-cell;
  width:33%;
}

.d {
  text-align: right;
}

.e {
  position: absolute;
  left: 50%;
  display: inline;
  width: auto;
  transform: translateX(-50%);
}

Lien du stylo code

3
Pruthvi P

HTML: 

<div id="container" class="blog-pager">
   <div id="left">Left</div>
   <div id="right">Right</div>
   <div id="center">Center</div>    
</div>

CSS: 

 #container{width:98%; }
 #left{float:left;}
 #center{text-align:center;}
 #right{float:right;}

text-align:center; donne un centre parfait.

Démo JSFiddle

2
Khalid Farhan

J'ai fait une autre tentative pour simplifier cela et y parvenir sans la nécessité d'un conteneur.

HTML

.box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

CSS

  .box1 {
  background-color: #ff0000;
  width: 200px;
  float: left;
}

.box2 {
  background-color: #00ff00;
  width: 200px;
  float: right;
}

.box3 {
  background-color: #0fffff;
  width: 200px;
  margin: 0 auto;
}

Vous pouvez le voir en direct sur JSFiddle

1
user15100

Utilisation de Bootstrap Je crée 3 divs de largeur égale (en 12 colonnes, 4 colonnes pour chaque div). De cette façon, vous pouvez garder votre zone centrale centrée même si les sections gauche/droite ont des largeurs différentes (si elles ne débordent pas l'espace de leurs colonnes).

HTML:

<div id="container">
  <div id="left" class="col col-xs-4 text-left">Left</div>
  <div id="center" class="col col-xs-4 text-center">Center</div>
  <div id="right" class="col col-xs-4 text-right">Right</div>
</div>

CSS:

#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  border: 1px solid #07f;
  padding: 0;
}

CodePen

Pour créer cette structure sans bibliothèques, j'ai copié certaines règles de Bootstrap CSS.

HTML:

<div id="container">
  <div id="left" class="col">Left</div>
  <div id="center" class="col">Center</div>
  <div id="right" class="col">Right</div>
</div>

CSS:

* {
  box-sizing: border-box;
}
#container {
  border: 1px solid #aaa;
  margin: 10px;
  padding: 10px;
  height: 100px;
}
.col {
  float: left;
  width: 33.33333333%;
  border: 1px solid #07f;
  padding: 0;
}
#left {
  text-align: left;
}
#center {
  text-align: center;
}
#right {
  text-align: right;
}

CopePen

1
mortalis

Vous pouvez essayer ceci:

Votre code html ressemble à ceci:

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

et votre code css comme ceci:

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

alors, sa sortie devrait être comme ceci:

[[LEFT]       [CENTER]        [RIGHT]]
0
kishan Radadiya

Voici les modifications que j'ai dû apporter à la réponse acceptée lorsque je l'ai fait avec une image en tant qu'élément central:

  1. Assurez-vous que l'image est incluse dans un div (#center dans ce cas). Si ce n'est pas le cas, vous devrez définir display sur block, et il semble que son centre est relatif par rapport à l'espace entre les éléments flottants.

  2. Assurez-vous de définir la taille de l’image et son conteneur:

    #center {
    margin: 0 auto;
}

#center, #center > img {
    width: 100px;
    height: auto;
}
0
Sam