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?


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.


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/


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>

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 .


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>

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>

[Première seconde]

[Troisième]

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


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

12

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

01. Utiliser le tour de table

02. Utilisation de Flex Trick

03. Utilisation de Float Trick


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:


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>

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


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


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


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


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

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]]

-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

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.


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

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

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
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.