Comment aligner 3 divisions (gauche / centre / droite) à l'intérieur d'une autre division?

392

Je veux avoir 3 divisions alignées à l'intérieur d'une division de conteneur, quelque chose comme ceci:

[[LEFT]       [CENTER]        [RIGHT]]

La division du conteneur est 100% large (pas de largeur définie) et la division centrale doit rester au centre après le redimensionnement du conteneur.

J'ai donc 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?

html css flexbox alignment css-float serg
la source
1
Si le conteneur devient plus étroit que 300 pixels de large, cela se produira à moins que vous ne définissiez la propriété de débordement.
inkedmn
Flexbox et aussi Grid: jsfiddle.net/w0s4xmc0/12963
Manoj Kumar
Juste pour noter - Selon le commentaire de @ inkedmn, avec un tas de contenu dans chaque colonne, je ne pouvais pas tous les aligner correctement à n'importe quelle largeur de conteneur sans overflow: hidden;sur la centercolonne. Ensuite, dans la requête multimédia pour les petits appareils, lorsque j'avais les 3 colonnes overflow: hidden;centrées sur la page les unes au-dessus des autres, j'avais besoin de la ligne du milieu (qui était la colonne de droite sur les gros appareils), sinon elle n'avait pas de hauteur et n'était pas centrée verticalement entre le haut et le bas.
Chris L

Réponses:

364

Avec ce CSS, mettez vos divs comme ça (flotte d'abord):

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

PS Vous pouvez également flotter à droite, puis à gauche, puis au centre. L'important est que les flotteurs viennent avant la section centrale "principale".

PPS Vous voulez souvent le dernier à l'intérieur de #containercet extrait de code: <div style="clear:both;"></div>qui s'étendra #containerverticalement pour contenir les deux flotteurs latéraux au lieu de prendre sa hauteur uniquement à partir #centeret éventuellement de laisser les côtés dépasser du bas.

dkamins
la source
comment feriez-vous si le conteneur n'était pas à 100%? J'essaie quelque chose comme ça ici, j'aimerais que la div reste à la droite du conteneur, mais elle flotte à droite de la page
Tiago
@Tiago: Les flotteurs doivent rester limités à la div s'ils sont à l'intérieur. Vérifiez la largeur du conteneur en le réglant sur border:solid. S'il est à 100%, placez-le dans une autre div pour le positionner à l'intérieur de votre page.
James P.
Aussi - Si vous les placez dans un conteneur redimensionnable, assurez-vous de définir une largeur minimale du conteneur pour empêcher le div flottant à droite d'être poussé vers le bas.
Tapefreak
6
Cette réponse a plus de six ans. En 2016, la bonne réponse est flexbox.
1
@torazaburo, il y a peut-être plus d'une bonne réponse, il y a plusieurs façons d'atteindre le même point, dans ce cas, je dois utiliser cette solution car un framework que j'utilise, définit déjà à gauche et à droite avec float to elements, juste l'ajout d'un élément central à la fin est parfait pour moi.
Ninja Coding
128

Si vous ne souhaitez pas modifier votre structure HTML, vous pouvez également le faire en ajoutant text-align: center;à l'élément wrapper et 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/

fruechtemuesli
la source
1
C'est la seule solution qui se redimensionne correctement avec la largeur de la fenêtre sans se plier trop tôt.
Jared Sealey
2
C'est parfait lorsque les tailles gauche et droite sont égales. Sinon, le Centre n'est pas centré.
mortalis
127

Alignement horizontal de trois divisions à l'aide de Flexbox

Voici une méthode CSS3 pour aligner les div horizontalement à l'intérieur d'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>
Développer l'extrait

jsFiddle

La justify-contentpropriété prend cinq valeurs:

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

Dans tous les cas, les trois divisions 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, 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 flotteurs et aux tables, qui offrent une capacité de mise en page limitée car ils n'ont jamais été conçus pour la construction de mises en page, flexbox est une technique moderne (CSS3) avec une large gamme d'options.

Pour en savoir plus sur Flexbox, visitez:

Prise en charge du navigateur: Flexbox est pris en charge par tous les principaux navigateurs, à l' exception d'IE <10 . Certaines versions de navigateur récentes, telles que Safari 8 et IE10, nécessitent des préfixes de fournisseur . Pour ajouter rapidement des préfixes, utilisez le préfixe automatique . Plus de détails dans cette réponse .

Michael Benjamin
la source
7
Flex est beaucoup mieux que d'utiliser des flotteurs.
Faizan Akram Dar
1
Grande explication ici et dans les articles liés! Un sidenote: L' utilisation d'éléments "span" comme éléments flex à l'intérieur du conteneur div fonctionnait dans firefox mais ne fonctionnait pas dans un navigateur basé sur javafx (webview). Changer les "travées" en "divs" a fonctionné dans les deux.
Ashok du
Internet Explorer 10 et les versions antérieures ne prennent pas en charge la propriété justification du contenu
D.Snap
1
Cela ne fonctionne malheureusement qu'avec des articles de même largeur. Voir également stackoverflow.com/questions/32551291/…
gérer
Excellent, j'ai essayé toutes les solutions ici et c'est la meilleure!
Nico Müller
22

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 ou à 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>
Développer l'extrait

pour la float:leftsortie sera[First][second][Third]

pour la float:rightsortie sera[Third][Second][First]

Cela signifie que la propriété float => left ajoutera votre élément suivant à gauche du précédent, même cas avec droit

Vous devez également prendre en compte 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>
Développer l'extrait

[Première seconde]

[Troisième]

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

Rajiv Pingale
la source
13

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

  1. Tout d'abord, la définition de la largeur à 100 px est limitative. Ne le fais pas.

  2. Deuxièmement, la définition de la largeur du conteneur à 100% fonctionnera correctement, jusqu'à ce que nous parlions d'une barre d'en-tête / pied de page pour l'ensemble de l'application, comme une barre de navigation ou de crédits / copyright. Utilisez à la right: 0;place pour ce scénario.

  3. Vous utilisez (le hachage de id #container, #leftetc.) au lieu des classes ( .container, .left, etc.), ce qui est bien, sauf si vous voulez répéter votre modèle de style ailleurs dans votre code. J'envisagerais plutôt d'utiliser des cours.

  4. Pour HTML, pas besoin d'échanger l'ordre pour: gauche, centre et droite. display: inline-block;corrige cela, en retournant votre code à quelque chose de plus propre et logique dans l'ordre à nouveau.

  5. Enfin, vous devez vider tous les flotteurs pour ne pas gâcher l'avenir <div>. Vous faites cela avec leclear: 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; }
}
Eric Wanchic
la source
12

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

01. Utiliser le tour de table

Afficher l'extrait de code

02. Utilisation de Flex Trick

Afficher l'extrait de code

03. Utilisation de Float Trick

Afficher l'extrait de code

Santosh Khalse
la source
11

Cela peut être facilement fait en utilisant la CSS3 Flexbox, une fonctionnalité qui sera utilisée à l'avenir (lorsque <IE9 est complètement mort) par presque tous les navigateurs.

Vérifiez le tableau 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 */
}

Production:

Afficher l'extrait de code

Manoj Kumar
la source
4

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>
Ka.
la source
3

réponse possible, si vous souhaitez conserver l'ordre du 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%);
}

Code Pen Link

Pruthvi P
la source
2

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 alignement parfait au centre.

JSFiddle Demo

Khalid Farhan
la source
Il ne fait que centrer le div dans votre exemple car les éléments de texte ont presque la même taille, allongent un texte et le div #center n'est plus au centre: jsfiddle.net/3a4Lx239
Kai Noack
1

J'ai fait une autre tentative pour simplifier cela et y parvenir sans avoir besoin 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

user15100
la source
1

Utilisation de Bootstrap 3 je crée 3 divs de largeur égale (dans une disposition de 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épassent 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

mortalis
la source
0

Voici les changements que j'ai dû apporter à la réponse acceptée lorsque j'ai fait cela avec une image comme élément central:

  1. Assurez-vous que l'image est entourée d'un div ( #centerdans ce cas). Si ce n'est pas le cas, vous devrez le définir displaysur block, et il semble se centrer par rapport à l'espace entre les éléments flottants.

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

    #center {
    margin: 0 auto;
}

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

Vous pouvez essayer ceci:

Votre code html comme celui-ci:

<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;}

donc, sa sortie devrait être comme ceci:

[[LEFT]       [CENTER]        [RIGHT]]
kishan Radadiya
la source
-1 
.processList
  text-align: center
  li
  .leftProcess
    float: left
  .centerProcess
    float: none
    display: inline-block
  .rightProcess
    float: right

html
ul.processList.clearfix
  li.leftProcess

li.centerProcess
li.rightProcess
shubham
la source
2
Bienvenue dans Stack Overflow! Veuillez ajouter quelques explications sur la raison pour laquelle ce code aide l'OP. Cela aidera à fournir une réponse aux futurs téléspectateurs. Voir Comment répondre pour plus d'informations.
Heretic Monkey
-3

Vous l'avez fait correctement, il vous suffit de vider vos flotteurs. Ajoutez simplement 

overflow: auto;

à votre classe de conteneur.

Mustapha ZEGAOULA
la source
-6

La solution la plus simple consiste à créer une table avec 3 colonnes et à centrer cette table.

html:

 <div id="cont">
        <table class="aa">
            <tr>
                <td>
                    <div id="left">
                        <h3 class="hh">Content1</h3>
                        </div>
                    </td>
                <td>
                    <div id="center">
                        <h3 class="hh">Content2</h3>
                        </div>
                 </td>
                <td>
                    <div id="right"><h3 class="hh">Content3</h3>
                        </div>
                </td>
            </tr>
        </table>
    </div>

css:

#cont 
{
  margin: 0px auto;    
  padding: 10px 10px;
}

#left
{    
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#center
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}

#right
{
  width: 200px;
  height: 160px;
  border: 5px solid #fff;
}
Sthembiso F. Makhathini
la source
-10 
#warpcontainer  {width:800px; height:auto; border: 1px solid #000; float:left; }
#warpcontainer2 {width:260px; height:auto; border: 1px solid #000; float:left; clear:both; margin-top:10px }
octets
la source
2
Plutôt que de publier uniquement un bloc de code, veuillez expliquer pourquoi ce code résout le problème posé. Sans explication, ce n'est pas une réponse.
Martijn Pieters