Come posso allineare orizzontalmente i miei div?

Per qualche ragione i miei div non centreranno orizzontalmente in un div di contenimento:

.row { width: 100%; margin: 0 auto; } .block { width: 100px; float: left; } 
 
Lorem
Ipsum
Dolor

E a volte c’è un div di riga con un solo div di blocco in esso. Che cosa sto facendo di sbagliato?

Per ottenere ciò che stai cercando di fare:

Prendi in considerazione l’utilizzo della display: inline-block anziché float .

Prova questo:

 .row { width: 100%; text-align: center; // center the content of the container } .block { width: 100px; display: inline-block; // display inline with abality to provide width/height }​ 

DEMO

  • avendo margin: 0 auto; insieme con width: 100% è inutile perché l’elemento occuperà tutto lo spazio.

  • float: left farà galleggiare gli elementi a sinistra, fino a quando non rimarrà più spazio, quindi andranno su una nuova riga. Usa display: inline-block per poter visualizzare gli elementi in linea, ma con la possibilità di fornire dimensioni (rispetto al display: inline dove larghezza / altezza sono ignorate)

Un altro esempio funzionante , usando display: inline-block e text-align: center

HTML :

 
Hello
World

CSS :

 .container { ... } .row { text-align: center; } .btn { display: inline-block; margin-right: 6px; background-color: #EEE; } .clear { clear: both; } 

Fiddle: http://jsfiddle.net/fNvgS/

Sebbene non riguardi questa domanda (perché vuoi allineare i

s all’interno del contenitore) ma direttamente correlata: se volessi allineare solo una div orizzontalmente, potresti fare questo:

 #MyDIV { display: table; margin: 0 auto; } 

Gli allineamenti in CSS erano stati un incubo. Fortunatamente, un nuovo standard è stato introdotto dal W3C nel 2009: Flexible Box . C’è un buon tutorial su questo qui . Personalmente lo trovo molto più logico e più facile da capire rispetto ad altri metodi.

 .row { width: 100%; display: flex; flex-direction: row; } .block { width: 100px; } 
 
Lorem
Ipsum
Dolor

Utilizzando FlexBox:

 
Lorem
Ipsum
Dolor
.row { width: 100%; margin: 0 auto; display: flex; justify-content: center; /* for centering 3 blocks in the center */ /* justify-content: space-between; for space in between */ } .block { width: 100px; }

L’ultima tendenza è usare Flex o CSS Grid invece di usare Float. Tuttavia, alcuni browser dell’1% non supportano Flex. Ma a chi importa davvero dei vecchi utenti di IE comunque;)

Fiddle: Controlla qui

Se gli elementi devono essere visualizzati in una riga e IE 6/7 non importa, considera l’utilizzo di display: table e display: table-cell anziché float .

inline-block porta a spazi orizzontali tra gli elementi e richiede l’azzeramento di tali spazi. Il modo più semplice è impostare font-size: 0 per l’elemento genitore e quindi ripristinare font-size per gli elementi figli che sono stati display: inline-block impostando la font-size un valore px o rem .

Ho provato la risposta accettata, ma alla fine ho scoperto che:

 margin: 0 auto; width: anything less than 100%; 

Funziona bene finora.

Ho usato questi due approcci quando ho bisogno di gestire l’allineamento div orizzontale.
prima ( Allineamento centrale utilizzando la proprietà margine ):

 .center-horizontal-align { margin-left: auto; margin-right: auto; width: (less than 100%) or in px } 

Impostando i margini sinistro e destro su auto si specifica che devono dividere in parti uguali il margine disponibile. L’allineamento al centro non ha alcun effetto se la larghezza è 100%.

e il secondo:

 .center-horizontal-align { display: table margin-left: auto; margin-right: auto; } 

L’utilizzo del secondo approccio è utile quando si hanno diversi elementi e si desidera che tutti siano centrati in una cella della tabella (cioè più pulsanti in una cella).