7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CSS

Il Sacro Graal Dell'allineamento in CSS

Scroll to top
Read Time: 2 mins

Italian (Italiano) translation by Nicola Lamonaca (you can also view the original English article)

Recentemente, Chris Coyier ha pubblicato un albero di decisione sul suo sito, CSS Tricks, per mostrare diversi modi per centrare degli elementi orizzontalmente o verticalmente utilizzando CSS. Come soluzioni standalone, hanno tutte i loro contro, ma combinate diventano un mezzo assai potente per ottenere l'allineamento, che funziona in maniera cross-browser e consistente anche in IE8 e successive versioni.

Ecco come.

Blocchi iniziali

Se state costruendo un sito web responsive, starete probabilmente dimensionando i vostri elementi in unità percentuali, perciò creiamo un elemento .container arbitrario:

Per essere sicuri che il nostro elemento si espanda correttamente, impostiamo html, body { width: 100%; height: 100%; }.

Tabelle in soccorso

A questo punto, all'interno di quel .container, andremo ad ottenere l'allineamento verticale utilizzando il pattern common table. Esso prende dei normali elementi block e fa sì che si comportino come delle celle di una tabella, permettendoci di ottenere l'allineamento verticale:

Infine, andiamo ad aggiungere un elemento allineato orizzontalmente:

Al suo interno, potrete metterci tutto ciò che desiderate, inclusi blocchi di testo ad altezza dinamica, oppure elementi posizionati assolutamente.

Varianti

Per cambiare l'allineamento orizzontale dell'elemento, è sufficiente modificare la proprietà text-align di .inner. Per cambiare l'allineamento verticale, invece, modificate la proprietà vertical-align di .inner.

In Conclusione

Questo esempio potrebbe sembrare un bel po' di markup da scrivere, ma di fatto i componenti sono solo tre div: .outer, .inner, e .centered. E lo stile per essi è consistente, pertanto potrete usarlo come template nel vostro boilerplate CSS in progetti diversi e non preoccuparvene più.

Si tratta solo di un elemento in più rispetto alle più diffuse tecniche di allineamento ed è a prova di proiettile. La mia speranza è che questo diventi l'approccio standard per problemi di questo tipo e che possiamo finalmente smettere di preoccuparci dell'allineamento in CSS.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.