HTML & CSS

Illogicismi CSS2 – “margin: auto”

A volte con i CSS si pensa di poter fare delle cose in maniera semplice e diretta quando invece non è così. Prendiamo il seguente caso, si vuole centrare un div (div2) dentro un altro div (div1) utilizzando la proprietà margin:auto. Questo verrà sì centrato orizzontalmente ma non verrà centrato verticalmente. Per far sì che venga centrato anche verticalmente si dovrà rinunciare all’utilizzo del margin:auto e ricorrere al seguente espediente.

schema

div2 {
 position: absolute; /* ricordarsi di settare il div1 con position: relative */
 top: 50%;
 margin-top: -y px; /* dove y = altezza del div2/2 */
 left: 50%;
 margin-left: -x px; /* dove x = larghezza del div2/2 */
 ...
}

In questo modo avremo il nostro div perfettamente centrato. 😉

Proprietà CSS utili: “word-break”

Quando vi ritrovate a dover fare in modo che il testo inserito dentro un elemento con determinate dimesioni non esca fuori dal suo contenitore, potete utilizzare oltre alla proprietà css overflow la proprietà word-break. Quest’ultima farà in modo che il testo inserito vada a capo una volta raggiunto il limite della larghezza del contenitore ! Come valore dovrete assegnare break-all. Ovviamente l’altezza del contenitore non dovrà essere fissa, ma impostata su “auto”, o meglio ancora tramite la proprietà min-height su un valore a vostra scelta. A seguire un esempio;

div {
 word-break: break-all;
 ...
}