Css allineamento orizzontale dei blocchi. Centrare un blocco con CSS

#child (altezza della linea: 200 px;)

Questo metodo funziona in tutti i browser, ma ricorda di usarlo per una riga di testo. Se il tuo testo si estende su più di una riga, usa un metodo diverso. Il valore della proprietà line-height può essere qualsiasi cosa, ma non inferiore all'altezza del carattere. In pratica, questo metodo è ottimo per centrare i menu orizzontali.

Metodo CSS che utilizza le proprietà della tabella

Come ho scritto prima, il contenuto della cella può essere centrato utilizzando la proprietà CSS di allineamento verticale. L'elemento genitore deve essere rappresentato come una tabella, l'elemento figlio deve essere designato come una cella e ad esso applichiamo la proprietà vertical-align con il valore al centro. In questo modo, qualsiasi contenuto nell'elemento figlio sarà centrato verticalmente. Il codice CSS è riportato di seguito.

#parent (display: table;) #child (display: table-cell; vertical-align: middle;)

Sfortunatamente, questo metodo non funziona nelle versioni precedenti del browser IE. Se hai bisogno del supporto del browser per IE6 e versioni precedenti, aggiungi una dichiarazione display: inline-block all'elemento figlio.

#child (display: inline-block;)

Posizionamento assoluto e margine negativo

Questo metodo è per gli elementi a livello di blocco e funziona in tutti i browser. È necessario impostare l'altezza dell'elemento da centrare.

Di seguito è riportato il codice in cui è centrato il bambino utilizzando il metodo indicato.

#parent (posizione: relativa;) #child (posizione: assoluta; alto: 50%; sinistra: 50%; altezza: 30%; larghezza: 50%; margine: -15% 0 0 -25%;)

Innanzitutto, è necessario posizionare il genitore e il bambino. Quindi impostiamo l'offset del figlio al 50% rispetto alla parte superiore (in alto) ea sinistra (a sinistra) dell'elemento genitore, centrando così il figlio rispetto al genitore. Tuttavia, le nostre manipolazioni posizioneranno l'angolo in alto a destra del bambino al centro del genitore, il che ovviamente non è adatto a noi.

Il nostro compito è spostare il bambino in alto ea sinistra, rispetto al genitore, in modo che il bambino sia visivamente centrato verticalmente e orizzontalmente. Ecco perché è necessario conoscere l'altezza e la larghezza del bambino.

Quindi, dovremmo dare al bambino un margine superiore e sinistro negativo pari alla metà, rispettivamente, della larghezza e dell'altezza del bambino.

A differenza dei primi due metodi, questo metodo è destinato agli elementi a livello di blocco. Il metodo funziona in tutti i browser, tuttavia, il contenuto può superare l'altezza dell'elemento genitore e andare oltre. Questo metodo funziona meglio quando l'altezza e la larghezza degli elementi sono fisse.

Posizionamento assoluto del bambino

Come con il metodo precedente, il genitore e il figlio sono posizionati rispettivamente in modo relativo e assoluto.

Nel codice CSS, centro il bambino sia verticalmente che orizzontalmente, tuttavia puoi utilizzare solo il centraggio verticale.

#parent (posizione: relativa;) #child (posizione: assoluta; superiore: 0; inferiore: 0; sinistra: 0; destra: 0; larghezza: 50%; altezza: 30%; margine: auto;)

L'idea alla base di questo metodo è che puoi posizionare l'elemento figlio usando i valori delle proprietà top, left, right, bottom uguali a 0. Poiché il nostro elemento figlio è più piccolo dell'elemento genitore, non può "attaccarsi" al elemento genitore.

I valori dei margini per tutti e quattro i lati del figlio sono zero, in modo che l'elemento sia centrato verticalmente rispetto al padre. Sfortunatamente, questo metodo ha gli stessi inconvenienti del metodo precedente: è necessario correggere l'altezza e la larghezza del bambino, mancanza di supporto per i browser IE meno recenti.

L'imbottitura inferiore e superiore è uguale

In questo metodo, diamo esplicitamente all'elemento genitore uguale padding (in basso e in alto) in modo che il figlio sia visivamente centrato verticalmente.

#genitore (imbottitura: 5% 0;) #figlio (imbottitura: 10% 0;)

Sto usando dimensioni relative. Se le dimensioni dei blocchi sono fisse, sarà necessario eseguire alcuni calcoli matematici.

Ad esempio, se un elemento padre ha un'altezza di 400 px e un elemento figlio è 100 px, allora dovresti impostare il padding superiore e inferiore a 150 px.

150 + 150 + 100 = 400

Diviso galleggiante

Questo metodo utilizza un blocco float vuoto che controlla la posizione verticale del bambino. Il div mobile deve essere posizionato davanti al figlio, vedere il codice HTML di seguito.

#parent (altezza: 250px;) #floater (float: sinistra; altezza: 50%; larghezza: 100%; margin-bottom: -50px;) #child (clear: entrambi; altezza: 100px;)

Innanzitutto, spostiamo il riquadro mobile a sinistra (oa destra) e gli diamo un'altezza del 50% del suo genitore. In questo modo, la casella mobile riempirà la metà superiore del genitore.

Poiché il blocco è mobile, viene rimosso dal flusso generale del documento, pertanto la proprietà clear dovrebbe essere assegnata al blocco figlio con un valore di entrambi. Ho impostato il valore su entrambi, tuttavia è possibile utilizzare il valore che corrisponde alla direzione di posizionamento dell'elemento flottante.

Il bordo superiore del figlio ora si trova direttamente sotto il bordo inferiore dell'elemento flottato. Vogliamo sollevare il bambino della metà dell'altezza del galleggiante. Per fare ciò, è sufficiente impostare il margine inferiore negativo pari al 50% per il blocco mobile.

Funziona in tutti i browser. Lo svantaggio di questo metodo è che hai bisogno di un blocco vuoto e devi conoscere l'altezza dell'elemento figlio.

Penso che molti di voi che hanno fatto il layout si siano imbattuti nella necessità di allineare gli elementi verticalmente e sappiano quali difficoltà sorgono quando si allinea un elemento al centro.

Sì, per l'allineamento verticale, CSS ha una speciale proprietà di allineamento verticale con più valori. In pratica, tuttavia, non funziona affatto come previsto. Proviamo a capirlo.

Confrontiamo i seguenti approcci. Allineare con:

• tavoli,
• trattini,
• altezza della linea,
• allungamento,
• margine negativo,
• trasformare,
• pseudo-elemento,
• scatola flessibile.

A titolo illustrativo, si consideri il seguente esempio.

Ci sono due div, uno nidificato nell'altro. Diamo loro le classi corrispondenti: esterna e interna.

La sfida è allineare l'elemento interno al centro dell'elemento esterno.

Innanzitutto, considera il caso in cui le dimensioni delle unità esterna e interna conosciuto... Aggiungiamo display: inline-block all'elemento interno e text-align: center e vertical-align: middle a quello esterno.

Ricordo che l'allineamento si applica solo agli elementi che hanno la modalità di visualizzazione in linea o in blocco in linea.

Diamo ai blocchi le dimensioni e i colori di sfondo per vedere i loro bordi.

Esterno (larghezza: 200 px; altezza: 200 px; allineamento testo: centro; allineamento verticale: medio; colore di sfondo: #ffc;) .inner (display: blocco in linea; larghezza: 100 px; altezza: 100 px; colore di sfondo : #fcc;)
Dopo aver applicato gli stili, vedremo che il blocco interno è allineato orizzontalmente, ma non verticalmente:
http://jsfiddle.net/c1bgfffq/

Perchè è successo? Il punto è che la proprietà di allineamento verticale influisce sull'allineamento. l'elemento stesso, non il suo contenuto(tranne quando si applica alle celle della tabella). Pertanto, l'applicazione di questa proprietà a un elemento esterno non ha avuto alcun effetto. Inoltre, l'applicazione di questa proprietà a un elemento interno non avrà alcun effetto, poiché i blocchi in linea sono allineati verticalmente rispetto ai blocchi adiacenti e nel nostro caso abbiamo un blocco in linea.

Esistono diverse tecniche per risolvere questo problema. Di seguito daremo un'occhiata più da vicino a ciascuno di essi.

Allinea con una tabella

La prima soluzione che viene in mente è sostituire il blocco esterno con una tabella a una cella. In questo caso, l'allineamento verrà applicato al contenuto della cella, ovvero al blocco interno.

http://jsfiddle.net/c1bgfffq/1/

L'ovvio svantaggio di questa soluzione è che, dal punto di vista della semantica, è sbagliato utilizzare le tabelle per l'allineamento. Il secondo inconveniente è che per creare la tabella è necessario aggiungere un altro elemento attorno al blocco esterno.

Il primo meno può essere parzialmente rimosso sostituendo i tag table e td con div e impostando la modalità di visualizzazione della tabella in CSS.

.outer-wrapper (display: table;) .outer (display: table-cell;)
Tuttavia, il blocco esterno rimarrà comunque un tavolo con tutte le conseguenze che ne conseguiranno.

Allinea con i rientri

Se le altezze delle scatole interne ed esterne sono note, l'allineamento può essere impostato utilizzando il riempimento verticale della scatola interna utilizzando la formula: (H esterna - H interna) / 2.

Esterno (altezza: 200 px;) .interno (altezza: 100 px; margine: 50 px 0;)
http://jsfiddle.net/c1bgfffq/6/

Lo svantaggio della soluzione è che è applicabile solo in un numero limitato di casi quando si conoscono le altezze di entrambi i blocchi.

Allineamento con l'altezza della linea

Se sai che il blocco interno non deve occupare più di una riga di testo, puoi utilizzare la proprietà line-height e impostarla uguale all'altezza del blocco esterno. Poiché il contenuto del blocco interno non deve andare a capo nella seconda riga, si consiglia di aggiungere anche lo spazio bianco: nowrap e overflow: regole nascoste.

Esterno (altezza: 200 px; altezza linea: 200 px;) .inner (spazio bianco: nowrap; overflow: nascosto;)
http://jsfiddle.net/c1bgfffq/12/

Puoi anche usare questa tecnica per allineare il testo su più righe ridefinendo il valore dell'altezza della riga per il blocco interno e aggiungendo display: inline-block e vertical-align: regole intermedie.

Esterno (altezza: 200 px; altezza linea: 200 px;) .interno (altezza linea: normale; display: blocco in linea; allineamento verticale: medio;)
http://jsfiddle.net/c1bgfffq/15/

Lo svantaggio di questo metodo è che l'altezza del blocco esterno deve essere nota.

Allineamento elastico

Questo metodo può essere utilizzato quando l'altezza dell'unità esterna è sconosciuta, ma l'altezza dell'unità interna è nota.

Per questo hai bisogno di:

1. impostare il posizionamento relativo del blocco esterno e quello interno - assoluto;
2. aggiungi le regole top: 0 e bottom: 0 al blocco interno, per cui si estende per l'intera altezza del blocco esterno;
3. impostato su auto per il riempimento verticale del blocco interno.

.outer (posizione: relativa;) .inner (altezza: 100px; posizione: assoluta; alto: 0; basso: 0; margine: auto 0;)
http://jsfiddle.net/c1bgfffq/4/

L'essenza di questa tecnica è che la specifica dell'altezza per un riquadro allungato e posizionato in modo assoluto obbliga il browser a calcolare i margini verticali in proporzioni uguali quando è impostato su auto.

Allineamento con margine negativo in alto

Questo metodo è diventato ampiamente noto e viene utilizzato molto spesso. Come il precedente, si applica quando non si conosce l'altezza del blocco esterno, ma si conosce l'altezza del blocco interno.

È necessario impostare il posizionamento relativo del blocco esterno e quello interno - assoluto. Quindi devi spingere la scatola interna verso il basso per metà dell'altezza della parte superiore della scatola esterna: 50% e sollevarla per metà della sua altezza margin-top: -H inner / 2.

Esterno (posizione: relativo;) .inner (altezza: 100 px; posizione: assoluta; superiore: 50%; margine superiore: -50 px;)
http://jsfiddle.net/c1bgfffq/13/

Lo svantaggio di questo metodo è che l'altezza dell'unità interna deve essere nota.

Allineamento con trasformazione

Questo metodo è simile al precedente, ma può essere applicato quando l'altezza dell'unità interna è sconosciuta. In questo caso, invece di impostare un pixel padding negativo, puoi usare la proprietà transform e spostare il blocco interno verso l'alto usando la funzione translateY e un valore di -50%.

Outer (posizione: relativa;) .inner (posizione: assoluta; top: 50%; transform: translateY (-50%);)
http://jsfiddle.net/c1bgfffq/9/

Perché non è stato possibile impostare una percentuale nel metodo precedente? Poiché i valori percentuali della proprietà margin sono calcolati rispetto all'elemento genitore, un valore del 50% sarebbe metà dell'altezza della scatola esterna e avremmo dovuto alzare la scatola interna della metà della sua stessa altezza. La proprietà di trasformazione è giusta per questo.

Lo svantaggio di questo metodo è che non può essere applicato se il blocco interno ha un posizionamento assoluto.

Allinea con Flexbox

Il modo più moderno per allineare verticalmente consiste nell'utilizzare il layout della scatola flessibile (comunemente noto come Flexbox). Questo modulo ti consente di controllare in modo flessibile il posizionamento degli elementi sulla pagina, posizionandoli quasi come preferisci. L'allineamento centrale per Flexbox è un compito molto semplice.

La casella esterna deve essere impostata su display: flex e la casella interna deve essere impostata su margin: auto. Ed è tutto! Bello, non è vero?

Esterno (display: flessibile; larghezza: 200 px; altezza: 200 px;) .inner (larghezza: 100 px; margine: automatico;)
http://jsfiddle.net/c1bgfffq/14/

Lo svantaggio di questo metodo è che Flexbox è supportato solo dai browser moderni.

Quale modo scegliere?

È necessario procedere dall'enunciazione del problema:

• Per l'allineamento verticale del testo, è meglio utilizzare la spaziatura interna verticale o la proprietà line-height.
• Per elementi posizionati in modo assoluto con un'altezza nota (come le icone), la proprietà margin-top negativo è l'ideale.
• Per i casi più complessi, quando l'altezza del blocco è sconosciuta, è necessario utilizzare uno pseudo-elemento o la proprietà di trasformazione.
• Bene, se sei così fortunato da non aver bisogno di supportare versioni precedenti di IE, allora ovviamente è meglio usare Flexbox.

Tag: Aggiungi tag

Quando crei blocchi div, probabilmente ti sei imbattuto in situazioni in cui devi centrare il tuo div orizzontalmente e verticalmente usando CSS puro. Ad esempio, quando si creano popup con. Esistono diversi modi per implementare il centraggio e in questo articolo condividerò i miei modi preferiti e facili utilizzando CSS o jQuery.

Per cominciare, le basi:

Centratura orizzontale con CSS

È facile, usiamo margine per noi div bloccare.

NomeClasse (margine: 0 auto; larghezza: 200 px; altezza: 200 px;)

Per centrare il blocco div solo orizzontalmente, è necessario definire la larghezza del blocco (larghezza), utilizzare la proprietà auto per i margini sinistra e destra... Questo metodo funzionerà per tutti gli elementi del blocco (div, p, h1 e così via...). Per applicare il centraggio orizzontale per gli elementi in linea (link, immagini...), è necessario applicare il parametro Schermo:bloccare;

Centratura orizzontale e verticale con CSS

Centrare il blocco div orizzontalmente e verticalmente allo stesso tempo è un po' più complicato. È necessario conoscere in anticipo le dimensioni del blocco div.

ClassName (larghezza: 300 px; altezza: 200 px; posizione: assoluta; sinistra: 50%; superiore: 50%; margine: -100 px 0 0 -150 px;)

Usando assoluto posizionando il blocco, possiamo staccarlo dagli elementi circostanti e determinarne la posizione in relazione alle dimensioni della finestra del browser. Sposta il blocco div su 50% sinistra e in alto della finestra. L'angolo in alto a sinistra del blocco è ora al centro della finestra del browser. Resta da impostare il blocco div al centro della pagina spostandolo su metà della sua larghezza sinistra e metà della sua altezza su. Evviva! Il risultato è un eccellente centraggio del blocco in puro codice CSS.

Centratura orizzontale e verticale con jQuery

Come accennato in precedenza, il metodo di centraggio CSS funziona solo con dimensioni fisse. Se le dimensioni non vengono specificate, viene in soccorso il metodo jQuery:

$ (finestra) .resize (funzione () ($ (". nomeclasse"). css ((posizione: "assoluta", sinistra: ($ (finestra) .width () - $ (". nomeclasse"). )) / 2, in alto: ($ (window) .height () - $ (". ClassName"). OuterHeight ()) / 2));)); // Per eseguire la funzione quando la finestra è caricata: $ (window) .resize ();

Il funzionamento di questo metodo consiste nell'eseguire la funzione resize() utilizzando la riga $ (finestra) .ridimensiona ()... Questa funzione funziona ogni volta che la finestra del browser viene ridimensionata. Noi usiamo larghezza esterna () e altezza esterna () perché al contrario di larghezza () e altezza (), includono l'imbottitura e la larghezza dei bordi nella dimensione restituita. L'ultima riga avvia il processo di centraggio del blocco div al caricamento della pagina.

Il vantaggio dell'utilizzo di questo metodo è che potresti non sapere quale sia la dimensione del blocco div. Lo svantaggio principale sono le prestazioni solo con JavaScript abilitato. Pertanto, questo metodo è accettabile per interfacce multifunzionali come Vkontakte, Facebook, ecc.

Come sempre, puoi suggerire il tuo metodo preferito per centrare i blocchi scrivendo in un commento.

Ogni progettista di layout è costantemente confrontato con la necessità di allineare i contenuti in un blocco: orizzontalmente o verticalmente. Ci sono alcuni buoni articoli su questo argomento, ma offrono tutti molte opzioni interessanti, ma poche pratiche, motivo per cui devi dedicare più tempo per evidenziare la cosa principale. Ho deciso di inviare queste informazioni nel modulo che mi è conveniente per non cercarle più su Google.

Allineamento di blocchi con dimensioni note

Il modo più semplice per usare i CSS è allineare i blocchi che hanno un'altezza nota (per l'allineamento verticale) o una larghezza (per l'allineamento orizzontale).

Allineamento con imbottitura

A volte non è possibile centrare un elemento, ma aggiungervi dei bordi con il " imbottitura".

Ad esempio, hai un'immagine di 200 x 200 pixel e vuoi centrarla in un blocco di 240 x 300. Possiamo impostare l'altezza e la larghezza del riquadro esterno = 200 pixel e aggiungere 20 pixel in alto e in basso e 50 ciascuno a sinistra e a destra .

.example-wrapper1 (sfondo: # 535E73; larghezza: 200 px; altezza: 200 px; imbottitura: 20 px 50 px;)

Allineamento di scatole posizionate in modo assoluto

Se il blocco è impostato su " posizione: assoluta", quindi può essere posizionato rispetto al genitore più vicino con" position: relative ". Per fare ciò, tutte le proprietà devono (" superiore","Giusto","parte inferiore","sinistra") assegnare lo stesso valore all'unità interna, oltre a "margine: auto".

* C'è una sfumatura: la larghezza (altezza) del blocco interno + il valore di sinistra (destra, in basso, in alto) non deve superare la dimensione del blocco genitore. È più sicuro impostare le proprietà di sinistra (destra, inferiore, superiore) su 0 (zero).

.example-wrapper2 (posizione: relativa; altezza: 250 px; sfondo: url (spazio.jpg);) .cat-king (larghezza: 200 px; altezza: 200 px; posizione: assoluta; in alto: 0; a sinistra: 0; in basso: 0; destra: 0; margine: auto; sfondo: url (king.png);)

Allineamento orizzontale

Allinea con "text-align: center"

C'è una proprietà speciale per allineare il testo in un blocco " allineare il testo". Quando il valore è impostato" centro"ogni riga di testo sarà allineata orizzontalmente. Per il testo su più righe, questa soluzione è usata raramente, più spesso questa opzione può essere trovata per allineare span, collegamenti o immagini.

Una volta ho dovuto inventare un testo per mostrare come funziona l'allineamento del testo con i CSS, ma non mi è venuto in mente nulla di interessante. All'inizio ho deciso di copiare una filastrocca da qualche parte, ma mi sono ricordato che questo potrebbe rovinare l'unicità dell'articolo e che i nostri cari lettori non saranno in grado di trovarlo su Google. E poi ho deciso di scrivere questo paragrafo qui - dopotutto, il punto non è con esso, ma il punto è allineato.

.example-text (text-align: center; padding: 10px; background: # FF90B8;)

Va notato che questa proprietà funzionerà non solo per il testo, ma anche per qualsiasi elemento in linea ("display: inline").

Ma questo testo è allineato a sinistra, ma è nel blocco, che è allineato al centro rispetto all'involucro.

.example-wrapper3 (text-align: center; background: # FF90B8;) .inline-text (display: inline-block; width: 40%; padding: 10px; text-align: left; background: # FFE Загрузка;)

Allineare le caselle con i margini

Gli elementi del blocco con una larghezza nota sono facilmente allineati orizzontalmente se impostati su "margin-left: auto; margin-right: auto". Di solito si usa la notazione abbreviata: " margine: 0 auto"(qualsiasi valore può essere utilizzato al posto di zero). Ma questo metodo non funzionerà per l'allineamento verticale.

.lama-wrapper (altezza: 200 px; sfondo: # F1BF88;) .lama1 (altezza: 200 px; larghezza: 200 px; sfondo: url (lama.jpg); margine: 0 auto;)

Ecco come vale la pena allineare tutti i blocchi ove possibile (dove non è richiesto un posizionamento fisso o assoluto) - è il più logico e adeguato. Sebbene sembri ovvio, a volte ho visto esempi spaventosi con margini negativi, quindi ho deciso di chiarire.

Allineamento verticale

Ci sono molti più problemi con l'allineamento verticale - a quanto pare, questo non era previsto nei CSS. Esistono diversi modi per ottenere il risultato desiderato, ma non sono tutti molto belli.

Allineamento con la proprietà line-height

Nel caso in cui nel blocco sia presente una sola riga, è possibile ottenere il suo allineamento verticale applicando il " altezza della linea"e impostandolo all'altezza desiderata. Per sicurezza, dovresti anche impostare" altezza ", il cui valore sarà uguale al valore di "altezza linea", perché quest'ultimo non è supportato in tutti i browser.

.example-wrapper4 (line-height: 100px; color: # DC09C0; background: # E5DAE1; height: 100px; text-align: center;)

È anche possibile ottenere l'allineamento del blocco con più righe. Per fare ciò, dovrai utilizzare un blocco wrapper aggiuntivo e impostare l'altezza della linea su di esso. Il blocco interno può essere multilinea, ma è richiesto "in linea". Devi applicare "vertical-align: middle" ad esso.

.example-wrapper5 (line-height: 160px; height: 160px; font-size: 0; background: # FF9B00;) .example-wrapper5 .text1 (display: inline-block; font-size: 14px; line-height: 1.5; vertical-align: middle; background: # FFFAF2; color: # FF9B00; text-align: center;)

Il blocco wrapper deve avere "font-size: 0" impostato. Se non imposti la dimensione del carattere su zero, il browser aggiungerà alcuni pixel in più da se stesso. Dovrai anche specificare la dimensione del carattere e l'altezza della linea per il blocco interno, perché queste proprietà sono ereditate dal genitore.

Allineamento verticale nelle tabelle

Proprietà " allineamento verticale"influisce anche sulle celle della tabella. Con il valore" centrale "impostato, il contenuto all'interno della cella è centrato. Naturalmente, il layout della tabella è considerato arcaico in questi giorni, ma in casi eccezionali puoi simularlo specificando" display: cella-tabella".

Di solito uso questa opzione per l'allineamento verticale. Di seguito è riportato un esempio di layout tratto da un progetto già pronto. Di interesse è l'immagine, che è centrata verticalmente in questo modo.

.one_product .img_wrapper (display: table-cell; height: 169px; vertical-align: middle; overflow: hidden; background: #fff; width: 255px;) .one_product img (max-height: 169px; max-width: 100 %; larghezza minima: 140 px; display: blocco; margine: 0 auto;)

Va ricordato che se un elemento ha "float" diverso da "none", sarà comunque un blocco (display: block) - quindi dovrai utilizzare un blocco wrapper aggiuntivo.

Allineamento con un elemento in linea aggiuntivo

E per gli elementi in linea puoi applicare " allineamento verticale: medio". In questo caso, tutti gli elementi con" display: in linea"che sono sulla stessa linea si allineeranno con la linea centrale comune.

È necessario creare un blocco ausiliario con un'altezza uguale all'altezza del blocco genitore, quindi il blocco desiderato verrà centrato. È conveniente usare gli pseudo-elementi: prima o dopo per questo.

.example-wrapper6 (height: 300px; text-align: center; background: # 70DAF1;) .pudge (display: inline-block; vertical-align: middle; background: url (pudge.png); background-color: # fff; larghezza: 200 px; altezza: 200 px;) .riki (display: blocco in linea; altezza: 100%; allineamento verticale: centro;)

Display: flettere e allineare

Se non ti importa troppo degli utenti di Explorer 8, o ti interessa così tanto da essere disposto a inserire qualche javascript in più per il loro bene, puoi usare "display: flex". Le scatole flessibili fanno un ottimo lavoro nell'affrontare i problemi di allineamento e basta scrivere "margine: auto" per centrare il contenuto all'interno.

Finora, questo metodo non mi è praticamente mai capitato, ma non ci sono restrizioni speciali per questo.

.example-wrapper7 (display: flex; altezza: 300px; sfondo: # AEB96A;) .example-wrapper7 img (margine: auto;)

Bene, questo è tutto ciò che volevo scrivere sull'allineamento CSS. Ora centrare i contenuti non sarà più un problema!