Comment aligner 3 divs (left / center / right) dans un autre div?

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

[[LEFT] [CENTER] [RIGHT]] 

Le div du conteneur a une largeur de 100% (pas de largeur définie) et le div central doit restr au centre après le redimensionnement du conteneur.

Donc je mets:

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

Mais ça devient:

 [[LEFT] [CENTER] ] [RIGHT] 

Des conseils?

Avec ce CSS, mettez vos divs comme ça (flotte en premier):

 

PS Vous pouvez aussi 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 dans #container cet extrait:

qui étendra #container verticalement pour contenir les deux flottants latéraux au lieu de prendre uniquement sa hauteur à partir de #center côtés pour faire saillie vers le bas.

Si vous ne souhaitez pas modifier votre structure HTML, vous pouvez également y append 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/

Aligner trois divisions horizontalement à l’aide de Flexbox

Voici une méthode CSS3 pour aligner les divs 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; } 
 

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

Cette propriété est utilisée pour append des éléments à droite ou à gauche ou au centre.

Cela signifie que si vous placez le flottant à gauche, toutes les divisions seront ajoutées à gauche.

  
First
Second
Third

alors la sortie sera

[Premier Deuxième Troisième]

Vice versa si vous définissez la propriété Float juste pour tous, alors il va insérer tout votre div à droite

[Troisième] [Deuxième] [Première]

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

Vous devez également considérer la largeur de l’élément parent

si la sum de la largeur de l’élément enfant dépasse la largeur de l’élément parent, l’élément suivant sera ajouté à la ligne suivante

  
First
Second
Third

[Première seconde]

[Troisième]

Donc, vous devez considérer tous ces aspects pour obtenir le résultat parfait

J’aime mes barres serrées et dynamics. Ceci est pour CSS 3 et HTML 5

  1. Tout d’abord, le réglage de la largeur à 100px est limitant. Ne le fais pas

  2. Deuxièmement, si vous réglez la largeur du conteneur sur 100%, cela fonctionnera correctement, jusqu’à ce qu’il s’agisse d’une barre d’en-tête / pied de page pour l’application entière, comme une barre de navigation ou de crédits / copyright. Utilisez à right: 0; au lieu de cela pour ce scénario.

  3. Vous utilisez des identifiants (hash #container , #left , etc) au lieu de classes ( .container , .container , etc.), ce qui est bien, à moins que vous ne souhaitiez répéter votre motif de style ailleurs dans votre code. J’envisagerais plutôt d’utiliser des classes.

  4. Pour HTML, pas besoin de changer l’ordre pour: left, center, & right. display: inline-block; corrige cela en renvoyant votre code à quelque chose de plus propre et logiquement en ordre.

  5. Enfin, vous devez effacer tous les flottants pour qu’ils ne gênent pas les futures

    . Vous faites cela avec le clear: both;

Résumer:

HTML:

 

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

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

Vérifiez le tableau de compatibilité du navigateur

HTML

 
Left
Center
Right

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; } 
 
Left
Center
Right

Il existe plusieurs astuces pour aligner les éléments.

01. Utilisation du tour de table

 .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; } 
 
Left
Center
Right

Avec twitter bootstrap:

 

Left aligned text.

Right aligned text.

Center aligned text.

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

HTML

 
the
jai ho
watsup

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

HTML:

 
Left
Center

CSS:

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

text-align:center; donne un alignement parfait du centre.

JSFiddle Demo

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 à JSFiddle

Utilisation de Bootstrap 3 Je crée 3 div 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 de l’espace de leurs colonnes).

HTML:

 
Left
Center

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 à partir de Bootstrap CSS.

HTML:

 
Left
Center

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

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

  1. Assurez-vous que l’image est entourée d’un div ( #center dans ce cas). Si ce n’est pas le cas, vous devrez définir l’ display pour block , et il semble se centrer par rapport à l’espace entre les éléments flottants.
  2. Veillez à définir la taille de l’image et de son conteneur:

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

Vous pouvez essayer ceci:

Votre code HTML comme ceci:

 

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

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

 overflow: auto; 

à votre classe de conteneur.

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

html:

  

Content1

Content2

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