Come allineare 3 div (sinistra / centro / destra) all'interno di un'altra div?

392

Voglio avere 3 div allineati all'interno di un div container, qualcosa del genere:

[[LEFT]       [CENTER]        [RIGHT]]

Il div del contenitore è largo al 100% (nessuna larghezza impostata) e il div del centro dovrebbe rimanere al centro dopo il ridimensionamento del contenitore.

Quindi ho impostato:

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

Ma diventa:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

Qualche consiglio?

html  css  flexbox  alignment  css-float 
— serg
fonte
1
Se il contenitore diventa più stretto di 300 pixel di larghezza, ciò accadrà a meno che non si imposti la proprietà di overflow.
— inkedmn
Flexbox e anche Grid: jsfiddle.net/w0s4xmc0/12963
— Manoj Kumar,
Solo per notare - Come nel commento di @ inkedmn, con un sacco di contenuti in ogni colonna non sono riuscito a farli allineare correttamente a qualsiasi larghezza del contenitore senza overflow: hidden;sulla centercolonna. Quindi nella media query per piccoli dispositivi quando avevo tutte e 3 le colonne al centro della pagina l'una sopra l'altra, avevo bisogno overflow: hidden;della riga centrale (che era la colonna di destra sui dispositivi di grandi dimensioni) altrimenti non aveva altezza e non era centrata verticalmente tra la riga superiore e inferiore.
— Chris L

Risposte:

364

Con quel CSS, metti i tuoi div in questo modo (prima galleggia):

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

PS Potresti anche galleggiare a destra, quindi a sinistra, quindi al centro. L'importante è che i galleggianti vengano prima della sezione centrale "principale".

PPS Spesso vuoi l'ultimo all'interno di #containerquesto frammento: <div style="clear:both;"></div>che si estenderà #containerverticalmente per contenere entrambi i galleggianti laterali invece di prendere la sua altezza solo #centere forse consentire ai lati di sporgere dal fondo.

— dkamins
fonte
come lo faresti se il contenitore non fosse al 100%? Sto provando qualcosa del genere qui, vorrei che il div rimanesse nella parte destra del contenitore, ma galleggia a destra della pagina
— Tiago
@Tiago: i float dovrebbero rimanere vincolati al div se ci sono dentro. Controlla qual è la larghezza del contenitore impostandolo su border:solid. Se è al 100%, racchiudilo in un altro div per posizionarlo all'interno della tua pagina.
— James P.
Inoltre - Se li stai inserendo in un contenitore ridimensionabile, assicurati di impostare una larghezza minima del contenitore per evitare che il div flottato a destra venga spinto verso il basso.
— Tapefreak
6
Questa risposta ha più di sei anni. Nel 2016, la risposta corretta è flexbox.
1
@torazaburo, forse ci sono più di una risposta corretta, ci sono molti modi per raggiungere lo stesso punto, in questo caso, devo usare questa soluzione perché un framework che uso, già imposta a destra e a sinistra con float su elementi, solo aggiungere l'elemento centrale alla fine è perfetto per me.
— Ninja Coding
128

Se non si desidera modificare la struttura HTML, è possibile farlo anche aggiungendo text-align: center;all'elemento wrapper e display: inline-block;a all'elemento centrato.

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

Demo live: http://jsfiddle.net/CH9K8/

— fruechtemuesli
fonte
1
Questa è l'unica soluzione che si ridimensiona correttamente con la larghezza della finestra senza piegare troppo presto.
— Jared Sealey,
2
È perfetto quando le dimensioni Sinistra e Destra sono uguali. Altrimenti il ​​Centro non è centrato.
— mortalis,
127

Allineare tre div in orizzontale usando Flexbox

Ecco un metodo CSS3 per allineare i div orizzontalmente all'interno di un altro 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>
Espandi frammento

jsFiddle

La justify-contentproprietà accetta cinque valori:

  • flex-start (predefinito)
  • flex-end
  • center
  • space-between
  • space-around

In tutti i casi, i tre div sono sulla stessa linea. Per una descrizione di ciascun valore, consultare: https://stackoverflow.com/a/33856609/3597276

Vantaggi della flexbox:

  1. codice minimo; molto efficiente
  2. il centraggio, sia in verticale che in orizzontale, è semplice e facile
  3. colonne di uguale altezza sono semplici e facili
  4. più opzioni per l'allineamento di elementi flessibili
  5. è reattivo
  6. a differenza di float e tabelle, che offrono una capacità di layout limitata poiché non sono mai stati progettati per la creazione di layout, flexbox è una tecnica moderna (CSS3) con una vasta gamma di opzioni.

Per ulteriori informazioni sulla visita flessibile:

Supporto browser: Flexbox è supportato da tutti i principali browser, tranne IE <10 . Alcune versioni recenti del browser, come Safari 8 e IE10, richiedono prefissi fornitore . Per un modo rapido per aggiungere prefissi, utilizzare Autoprefixer . Maggiori dettagli in questa risposta .

— Michael Benjamin
fonte
7
Flex è molto meglio dell'utilizzo di galleggianti.
— Faizan Akram Dar
1
Grande spiegazione qui e nei post collegati! Un sidenote: l' utilizzo di elementi "span" come elementi flessibili all'interno del div contenitore ha funzionato in Firefox, ma non ha funzionato in un browser basato su Java (Webview). Cambiare gli "span" in "divs" ha funzionato in entrambi.
— Ashok,
Internet Explorer 10 e versioni precedenti non supportano la proprietà justify-content
— D.Snap
1
Questo purtroppo funziona solo con oggetti della stessa larghezza. Vedere anche stackoverflow.com/questions/32551291/...
— maniglia
Eccellente, ho provato tutte le soluzioni qui e questa è la migliore!
— Nico Müller
22

La proprietà float non viene effettivamente utilizzata per allineare il testo.

Questa proprietà viene utilizzata per aggiungere elementi a destra, a sinistra o al centro. 

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>
Espandi frammento

per l' float:leftoutput sarà[First][second][Third]

per l' float:rightoutput sarà[Third][Second][First]

Ciò significa che la proprietà float => left aggiungerà il tuo prossimo elemento a sinistra di quello precedente, stesso caso con right

Inoltre, devi considerare la larghezza dell'elemento padre, se la somma delle larghezze degli elementi figlio supera la larghezza dell'elemento padre, l'elemento successivo verrà aggiunto alla riga successiva

 <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>
Espandi frammento

[Primo secondo]

[Terzo]

Quindi è necessario considerare tutti questi aspetti per ottenere il risultato perfetto

— Rajiv Pingale
fonte
13

Mi piacciono le mie barre strette e dinamiche. Questo è per CSS 3 e HTML 5

  1. Innanzitutto, l'impostazione della larghezza su 100 px è limitante. Non farlo

  2. In secondo luogo, impostare la larghezza del contenitore su 100% funzionerà bene, fino a quando non si parlerà di una barra di intestazione / piè di pagina per l'intera app, come una barra di navigazione o di crediti / copyright. Utilizzare right: 0;invece per quello scenario.

  3. Stai usando id (hash #container, #leftecc.) Invece di classi ( .container, .leftecc.), Il che va bene, a meno che tu non voglia ripetere il tuo modello di stile altrove nel tuo codice. Considererei invece l'uso delle classi.

  4. Per HTML, non è necessario scambiare l'ordine per: sinistra, centro e destra. display: inline-block;risolve questo problema, restituendo il codice a qualcosa di più pulito e logicamente in ordine.

  5. Infine, è necessario eliminare tutti i galleggianti in modo che non si scherzi con il futuro <div>. Lo fai con ilclear: both;

Riassumere:

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

Punto bonus se si utilizza HAML e 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; }
}
— Eric Wanchic
fonte
12

Sono disponibili diversi trucchi per allineare gli elementi.

01. Utilizzo del trucco da tavolo

Mostra snippet di codice

02. Utilizzo di Flex Trick

Mostra snippet di codice

03. Utilizzo del trucco mobile

Mostra snippet di codice

— Santosh Khalse
fonte
11

Questo può essere fatto facilmente utilizzando CSS3 Flexbox, una funzionalità che verrà utilizzata in futuro (quando <IE9è completamente morta) da quasi tutti i browser.

Controlla la tabella di compatibilità del browser

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

Produzione:

Mostra snippet di codice

— Manoj Kumar
fonte
4

Con 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.
fonte
3

possibile risposta, se si desidera mantenere l'ordine dell'html e non utilizzare la flessibilità.

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

Link penna codice

— Pruthvi P
fonte
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; fornisce un allineamento centrale perfetto.

JSFiddle Demo

— Khalid Farhan
fonte
Centra solo il div nel tuo esempio perché gli elementi di testo hanno quasi le stesse dimensioni, allungano un testo e il div #center non è più al centro: jsfiddle.net/3a4Lx239
— Kai Noack
1

Ho fatto un altro tentativo per semplificare questo e raggiungerlo senza la necessità di un contenitore.

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

Puoi vederlo dal vivo su JSFiddle

— user15100
fonte
1

Usando Bootstrap 3 creo 3 div di uguale larghezza (nel layout di 12 colonne 4 colonne per ogni div). In questo modo puoi mantenere centrata la tua zona centrale anche se le sezioni sinistra / destra hanno larghezze diverse (se non traboccano lo spazio delle loro colonne).

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

Per creare quella struttura senza librerie ho copiato alcune regole da 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
fonte
0

Ecco le modifiche che ho dovuto apportare alla risposta accettata quando l'ho fatto con un'immagine come elemento centrale:

  1. Assicurati che l'immagine sia racchiusa in un div ( #centerin questo caso). In caso contrario, dovrai impostare displaysublock , e sembra centrare rispetto allo spazio tra gli elementi fluttuati.

  2. Assicurati di impostare la dimensione dell'immagine e del suo contenitore:

    #center {
    margin: 0 auto;
}

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

Puoi provare questo:

Il tuo codice html in questo modo:

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

e il tuo codice CSS in questo modo:

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

quindi, il suo output dovrebbe essere così:

[[LEFT]       [CENTER]        [RIGHT]]
— kishan Radadiya
fonte
-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
fonte
2
Benvenuto in Stack Overflow! Aggiungi una spiegazione del perché questo codice aiuta l'OP. Ciò contribuirà a fornire una risposta dalla quale i futuri spettatori possono imparare. Vedi Come rispondere per maggiori informazioni.
— Heretic Monkey,
-3

L'hai fatto correttamente, devi solo svuotare i galleggianti. Aggiungi semplicemente 

overflow: auto;

alla tua classe di container.

— Mustapha ZEGAOULA
fonte
-6

La soluzione più semplice è creare una tabella con 3 colonne e centrare quella tabella.

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
fonte
-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 }
— byte
fonte
2
Invece di pubblicare solo un blocco di codice, spiega perché questo codice risolve il problema posto. Senza una spiegazione, questa non è una risposta.
— Martijn Pieters
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.