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

https://stackoverflow.com/questions/2603700

25-09-2019
|

Domanda

Voglio avere 3 Div allineati all'interno di un Div contenitore, qualcosa del genere:

[[LEFT]       [CENTER]        [RIGHT]]

Il Div del contenitore è largo al 100% (nessuna larghezza del set) e Center Div dovrebbe rimanere al centro dopo aver ridimensionato il 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?

Soluzione

Con quel CSS, metti i tuoi div come così (galleggia prima):

<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 vengono prima della sezione centrale "principale".

PPS Spesso vuoi ultimo dentro #container Questo frammento: <div style="clear:both;"></div> che si estenderà #container verticalmente per contenere entrambi i galleggianti laterali invece di prendere la sua altezza solo da #center e possibilmente permettere ai lati di sporgere fuori dal fondo.

Altri suggerimenti

Se non vuoi cambiare la tua struttura HTML, puoi anche fare aggiungendo text-align: center; all'elemento wrapper e a display: inline-block; 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;
}

Dimostrazione dal vivo: http://jsfiddle.net/ch9k8/

Allineare tre div orizzontalmente 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>

jsfiddle

Il justify-content La proprietà prende 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 ogni valore consultare: https://stackoverflow.com/a/33856609/3597276

Vantaggi di Flexbox:

codice minimo; molto efficiente
Il centraggio, sia in verticale che in orizzontale, è semplice e facile
Le colonne uguali in altezza sono semplici e facili
Opzioni multiple per allineare gli elementi flessibili
è reattivo
A differenza dei carri e dei tavoli, che offrono una capacità di layout limitata perché non sono mai stati destinati alla costruzione di layout, Flexbox è una tecnica moderna (CSS3) con una vasta gamma di opzioni.

Per saperne di più su Flexbox Visit:

Metodi per allineare gli articoli flessibili
Utilizzando scatole flessibili CSS ~ Mdn
Una guida completa a Flexbox ~ CSS-Tricks
Che cosa Flexbox?! ~ Tutorial video di YouTube

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

La proprietà float non è in realtà utilizzata per allineare il testo.

Questa proprietà viene utilizzata per aggiungere elemento a destra o 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>

per float:left L'output sarà [First][second][Third]

per float:right L'output sarà [Third][Second][First]

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

Inoltre devi considerare la larghezza dell'elemento genitore, se la somma delle larghezze degli elementi figlio supera la larghezza dell'elemento genitore, 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>

Primo secondo

Terzo

Quindi devi considerare tutti questi aspetti per ottenere il risultato perfetto

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

Innanzitutto, l'impostazione della larghezza su 100px è limitante. Non farlo.
In secondo luogo, l'impostazione della larghezza del contenitore al 100% funzionerà bene, fino a quando non parlava di essere una barra di intestazione/piè di pagina per l'intera app, come una navigazione o una barra di crediti/copyright. Uso right: 0; Invece per quello scenario.
Stai usando ID (hash #container, #left, ecc.) Invece delle classi (.container, .left, ecc.), Che va bene, a meno che tu non voglia ripetere il tuo modello di stile altrove nel tuo codice. Prenderei invece in considerazione l'uso di classi.
Per HTML, non è necessario scambiare l'ordine per: a sinistra, al centro e a destra. display: inline-block; Risolvi questo, restituendo il tuo codice a qualcosa di più pulito e logicamente in ordine.
Infine, devi cancellare i galleggianti in modo che non si scherza con il futuro <div>. Lo fai con il clear: 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; }
}

Ci sono diversi trucchi disponibili per allineare gli elementi.

01. Utilizzo del trucco della tabella

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

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

02. Utilizzo del trucco flessibile

.container{
  display:flex;
  justify-content: center;
  align-items: center;
   }

.left{
  background:green;
  width:33.33vw;
}

.center{
  background:gold;
   width:33.33vw;
}

.right{
  background:gray;
   width:33.33vw;
}

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

03. Utilizzo del trucco float

.left{
  background:green;
  width:100px;
  float:left;
}

.center{
   background:gold;
   width:100px;
   float:left;
}

.right{
   background:gray;
   width:100px;
   float:left;
}

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

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

Controlla il 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:

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

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

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>

Possibile risposta, se si desidera mantenere l'ordine di HTML e non utilizzare 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%);
}

Link del codice

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; Dà un allineamento centrale perfetto.

Demo JSFIDDLE

Ho fatto un altro tentativo di semplificarlo 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 a Jsfiddle

Usando Bootstrap 3 Creo 3 div di uguale larghezza (in 12 colonne di layout 4 per ciascun div). In questo modo puoi mantenere la tua zona centrale centrata 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

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

Assicurati che l'immagine sia racchiusa in un div (#center in questo caso). Se non lo è, dovrai impostare display a block, e sembra centrare rispetto allo spazio tra gli elementi galleggiati.

Assicurati di impostare le dimensioni di entrambe le immagini e il suo contenitore:

#center {
    margin: 0 auto;
}

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

Puoi provare questo:

Il tuo codice HTML come questo:

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

E il tuo codice CSS come questo:

#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 diventato così:

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

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

overflow: auto;

alla tua classe di container.

La soluzione più semplice è quella di cacciare 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;
}

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

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow