Come centrare un elemento verticalmente

Talvolta ci si imbatte in problemi apparentemente “di poco conto”, ma che è indispensabile risolvere per cercare di mantenere un determinato equilibrio. Come nella vita, così (e soprattutto) nel Web Design.

Ma ovviamente non starò qui a vestire i panni della filosofa-occasionale-da-socialnetwork, mi limiterò ad occuparmi dell’aspetto puramente tecnico della questione, legato al codice html.

E, dato che si parla di equilibrio, quella che voglio trattare in questo articolo è proprio la possibilità di ottenere un equilibrio visivo con delle proprietà ben specifiche, in particolare, per riuscire a gestire una situazione che richiede l’allineamento di elementi in maniera verticale.

So per certo che è un cruccio di molti web designer poiché, girando tra i vari forum, ho potuto constatare che in molti richiedevano delle soluzioni al problema che però non sempre funzionavano.

Infatti, diversamente dall’allineamento orizzontale, che è possibile ottenere grazie ad un margin: auto; applicato ad un elemento di blocco, il discorso per l’allineamento verticale è un po’ più complesso.

Ma passiamo subito al fulcro della questione, senza perderci in chiacchiere.

Escamotage poco “ortodossi”

Qualcuno, per ovviare a questo problema, ossia quello di centrare gli elementi in un area (div, <p> o qualsiasi altro tag sia), ricorre al margin o padding, applicando pixel di distanza dal punto più alto, fino a posizionare il suddetto elemento al centro.

Questo, a Napoli, viene comunemente detto “pezzotto”, il che potrebbe anche fare al caso nostro, qualora avessimo solo un elemento da centrare in un solo contenitore ad altezza fissa.

Ma, nel caso più comune, in cui ci troviamo di fronte ad elementi di dimensioni diverse tra loro, allora questo metodo non è più indicato, poiché in quel caso bisognerebbe dare dei pixel di margin o padding diversi per ogni elemento, a seconda della distanza che lo allontana dal punto centrale.

Cosa fare quindi?

E’ presto detto.

Di seguito riporterò tre diversi esempi che mostreranno come centrare un testo o un’immagine all’interno di contenitori con diverse altezze e lunghezze.

Il codice

Innanzitutto, come sempre, ci preoccuperemo di creare una base in cui posizionare i vari div.

Iniziamo dunque dal contenitore generale:

<div id=”contenitore”>
</div>

nel quale andremo a mettere un altro contenitore per accorpare gli elementi.

(N.B. Anche se questa non è un’operazione indispensabile al nostro scopo, la faremo ugualmente per dare un minimo di ordine all’esempio.)

Dopodiché, aggiungiamo un div al suo interno, nel quale inseriremo i nostri blocchetti con contenuto centrato:


<div id=”contenitore”>
	<div id=”contenuto”>
		<!-- qui è dove inseriremo i nostri blocchi col contenuto centrato -->
	</div>
</div>

e infine un po’ di stile:

#contenitore { width: 800px; background: #F8F8F8; margin: auto; height:auto; padding: 10px;}
#contenuto {width:508px; padding:30px; margin:auto;}

Ora possiamo occuparci dell’allineamento.

#1 Centrare un testo in un contenitore quadrato

Se l’intenzione è quella di centrare un testo all’interno di un contenitore, basterà utilizzare le proprietà che seguono:

<div id="contenitore">
	<div id="contenuto">

<!-- contenitore quadrato con testo allineato verticalmente-->

<div class="blocco1">
	<div class="testo_centrato">
	Lorem ipsum docet iset est Lorem ipsum docet iset est.
</div>
</div>

#2 Centrare un testo in un contenitore quadrato – Lo stile

Con la classe “blocco1” specifichiamo il contenitore dell’elemento da allineare:

.blocco1 { display: table; position:relative;
margin: 12px; float: left; background:#ddd;
height: 230px;
width: 230px;}

Come prima cosa, diamo al “blocco1” un display: table; che è importante ai fini dell’allineamento poiché darà a tale div le stesse caratteristiche dell’ormai obsoleto tag <table> .

Il margin di 12px servirà a discostarlo dai contenitori attigui che inseriremo in un secondo momento, così come il float: left; che lo farà spostare sulla sinistra rispetto al contenitore di cui sopra.

L’height e il width saranno di 230px per dargli una forma quadrata.

Infine un background di colore grigio per evidenziare il contenitore rispetto al contenuto.

Le proprietà del testo da allineare, relative alla classe “testo_centrato”, sono invece:

.testo_centrato { display: table-cell;
vertical-align: middle;
text-align:center;}

Permettiamo al contenuto di comportarsi come l’elemento <td>, con la proprietà display: table-cell;

Il vertical-align: middle; lascia intuire che l’elemento sarà allineato verticalmente al centro.

E infine centriamo il testo con text-align: center;

Il risultato:

1

#3 Centrare un’immagine

Ai div già visti in precedenza, aggiungiamo:

<div class="blocco2">
<img src="budino.png" />
</div>

Vale a dire, un contenitore con la sua immagine all’interno perfettamente centrata.

#4 Centrare un’immagine – Lo stile

.blocco2 { position:relative;
margin: 12px;
float: left;
background:#ddd;
height: 230px;
width: 230px;}

Innanzitutto, diamo a questo secondo contenitore, con la classe “blocco2”, una position:relative; che ci servirà per sistemare poi l’immagine al suo interno.

Grazie a questa proprietà, infatti, l’elemento al suo interno, si comporterà in relazione al suo contenitore. Per cui, per esempio, se all’elemento contenuto diamo 20px left, si sposterà da sinistra del contenitore, quindi nel suo interno, di 20px.

Questa è l’unica proprietà che differenzia il contenitore con classe “blocco2” dal contenitore che abbiamo visto in precedenza con classe “blocco1”.

All’immagine contenuta all’interno, invece, daremo le seguenti proprietà:

.blocco2 img {
position: absolute;
bottom: 0;
left: 0;
margin: auto;
right: 0;
top: 0;}

La position: absolute; darà all’immagine una posizione assoluta, quindi “forzata”, all’interno del div. Quindi, impostando tutti i lati (top, right, bottom e left) pari a zero, con margin: auto; si posizionerà automaticamente al centro.

Il risultato

2 (1)

#5 Centrare un testo in un contenitore rettangolare

Come ultimo step, analizzeremo la possibilità di centrare un testo in un div di dimensioni diverse rispetto a quello visto in precedenza, contenuto in un tag <p>.

La sintassi:


<div class="blocco3">
	<div class="interno">

	<p>Lorem ipsum docet iset est Lorem ipsum docet iset est <br/>
iset est Lorem ipsum docet isetiset est Lorem ipsum docet iset iset est Lorem ipsum docet iset</p>
</div>
</div>

#6 Centrare un testo in un contenitore rettangolare – Lo stile

.blocco3 {
	background: #ddd;
	display: table;
float: left;
height: 154px;
width: 484px; margin: 12px;}

.blocco3 .interno { display: table-cell;
vertical-align: middle;
width: 100%;}

.blocco3 .interno p { text-align:center; padding: 24px;}

Diversamente dal primo contenitore analizzato, quest’ultimo, con classe “blocco3”, avrà una forma rettangolare data dal width uguale a 484px e height uguale a 154px.

La classe “interno” si comporterà come un elemento <td> grazie alla proprietà table-cell, come per il contenitore precedente, stavolta però il testo contenuto all’interno sarà ulteriormente modificabile perché messo in un tag <p>, quindi in questo ultimo esempio il testo sarà più accorpato al centro grazie al padding di 24px, evitando la sua estensione lungo tutta la larghezza del contenitore.

Il risultato:

3

E, infine, il risultato complessivo:

tutto

Qui è possibile trovare il codice.

Per adesso questo è tutto; bastano piccoli trucchi per ottenere risultati con un codice pulito e senza troppe imprecisioni.

Tag: ,

L'autore

Web e Graphic Designer dal 2009, freelance dal 2013, grammar nazi da sempre. Sono un'estimatrice della cultura giapponese, dei videogames retro e delle pogate ai concerti. Sostengo la sublime arte del dormire con cura e costanza, insieme alla musica e al mangiare. Talvolta anche contemporaneamente.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

9 commenti

Trackback e pingback

Non ci sono trackback e pingback disponibili per questo articolo