Comment aligner les 3 divs (gauche/centre/droite) à l'intérieur d'une div?

Avec CSS, mettre votre divs comme (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 centre. La chose importante est que les flotteurs avant de venir à la "main" de la section centrale.

P. P. S. Vous souhaitez souvent la dernière à l'intérieur de #container cet extrait: <div style="clear:both;"></div> qui permettra de prolonger #container à la verticale pour contenir à la fois des flotteurs latéraux au lieu de prendre sa hauteur seulement de #center et, éventuellement, permettant aux côtés de dépasser le bas.

Aligner Trois Divs Horizontale À L'Aide De Flexbox

Ici est un CSS3 méthode pour l'alignement des divs horizontalement à l'intérieur d'une div.

CSS:

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

HTML:

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

jsFiddle

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

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

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

Avantages de flexbox:

1. un minimum de code, très efficace
2. centrage, à la fois verticalement et horizontalement, est simple et facile
3. l'égalité de la hauteur des colonnes sont simples et faciles
4. de multiples options pour l'alignement des éléments flex
5. il est sensible
6. à la différence des flotteurs et des tables, qui offre limitée de mise en page de la capacité, parce qu'ils n'ont jamais été destiné à la réalisation de mises en page,
   flexbox est un moderne (CSS3) technique avec un large éventail d'options.

Pour en savoir plus sur flexbox visite:

• Méthodes d'Alignement Flex Éléments
• À l'aide de CSS flexible boîtes ~ MDN
• Un Guide Complet pour Flexbox ~ CSS-Tricks
• Ce que le Flexbox?! ~ YouTube tutoriel vidéo

Prise en charge du navigateur: Flexbox est pris en charge par tous les navigateurs principaux, sauf IE < 10. Certaines des dernières versions de navigateur comme Safari 8 et IE10, exiger fournisseur de préfixes. Un moyen rapide pour ajouter des préfixes utilisation Autoprefixer. Plus de détails dans cette réponse.

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

1. Tout d'abord, le réglage de la Largeur de 100px est un facteur limitant. Ne pas le faire.

2. Deuxième, réglage du conteneur largeur de 100% de travail ok, étaient jusqu'à parler d'une en-tête/pied de page de la barre pour l'ensemble de l'application, comme la navigation ou de crédits/droit d'auteur bar. Utilisation right: 0; la place pour ce scénario.

3. Vous utilisez des id (hash #container, #left, etc) au lieu de classes (.container, .left, etc), ce qui est bien, sauf si vous voulez répéter votre style de modèle ailleurs dans votre code. Je voudrais examiner à l'aide de classes à la place.

4. Pour le code HTML, pas besoin de swap afin de: gauche, centre, & droite. display: inline-block; résout ce, le retour de votre code à quelque chose de plus propre à la logique et dans l'ordre.

5. Enfin, vous devez effacer les flotteurs tout en place pour qu'il ne plaisante pas avec les futurs <div>. Vous faites cela avec la clear: both;

Pour 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 de Bonus si vous utilisez HAML et SASS 😉

HAML:

.container
  .left
  .center
  .right
  .clear

SASS:

.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 fait facilement en utilisant le CSS3 Flexbox, une fonction qui sera utilisée dans le futur(Quand <IE9 est complètement morte) par presque tous les navigateurs.

Vérifier la Compatibilité du Navigateur Table

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

De sortie:

CSS:

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

HTML:

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

réponse possible, si vous souhaitez conserver l'ordre de l'html et de 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 Stylo Lien

J'ai fait une autre tentative de le simplifier et de le réaliser 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 à JSFiddle

Voici les changements que j'ai eu à faire à la accepté de répondre quand je l'ai fait avec un image comme le centre de l'élément:

1. Assurez-vous que l'image est contenue dans une div (#center dans ce cas). Si ce n'est pas le cas, vous devrez mettre en display à block, et il semble, au centre, par rapport à l'espace entre les flottait éléments.

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

.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

La solution la plus simple est de créer un tableau avec 3 colonnes et le centre de la 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;
}