div a dimensione variabile centrato orizzontalmente

[cubalibre]

Ciao,
non riesco a trovare soluzione a questo problema dall'apparenza banale.
Ho un div che contiene un messaggio:senza doverne specificare le dimensioni vorrei che si adattasse sempre al suo contenuto (messaggio) e nello stesso si centrasse orizzontalmente....

Nico

[Skywalker87]

Allora sostituisci il tag <div> con uno di tipo inline, ad esempio <span>.

[Mich_]

Originariamente inviato da cubalibre
Ciao,
non riesco a trovare soluzione a questo problema dall'apparenza banale.
Ho un div che contiene un messaggio:senza doverne specificare le dimensioni vorrei che si adattasse sempre al suo contenuto (messaggio) e nello stesso si centrasse orizzontalmente....

Nico

Per centrare il testo, ti basta usare
text-align: center;

Supponendo che il tuo <div> abbia dimensioni definite, puoi fare:

HTML:
<div>
  

qui il testo da inserire. Se vuoi spezzarlo in punti che vuoi tu ci inserisci un
     &amp;lt;br /&amp;gt;, se vuoi che il testo NON si spezzi ad un determinato punto 
     in cui c'e` uno spazio, sostituisci lo spazio con &amp;nbsp; </p>
</div>

CSS:
#contenitore_del_div {
  width: ...;             /* deve essre definito event. anche in em o % */
}
div {
  width: 30em;       /* si puo` anche non definirlo */
  background-color: ...;
  margin: 0 auto;     /* per centrare il div dentro il blocco che lo conteine */
}
div p {
  width: 100%;
  text-align: center;
}

[cubalibre]

Mich_,
è andato a posto semplicemente aggiugendo, come da tuo suggerimento, width:30em al div.
Io prima mettevo width:auto intendendo che con auto lui si adattasse al suo contenuto. Invece con auto si allargava orizzontalmente su tutto il contenitore.
Con width:30em è subito andato a posto.
Cosa è successo?

Io non uso quasi mai le em... mi dai una breve spiegazione? perchè poi proprio 30, non 10 o 20..

Ti ringrazio moltissimo.

Ciao

Nico

[Mich_]

Il 30 lo ho buttato a caso. Il numero corretto dipende da quello che ci vuoi mettere dentro o dal posto dove lo devi infilare.

Gli em sono l'unita` di misura relativa al carattere usato.
Corrispondono alle dimensioni della lettera M (oppure m, a seconda delle fonti).
Se usi un font monospace, corrisponde esattamente al n. di caratteri che ci puoi mettere dentro, con un font proporzionale la cosa dipende chiaramente dai caratteri (le lettere i e l sono molto piu` strette, altre sono piu` larghe).

In linea di massima si dovrebbe usare:
% - per dimensioni relative al contenitore
px - se vuoi metterci dentro immagini, o se lo spazio a disp. e` limitato
em - se vuoi metterci soprattutto testo (se l'utente ha un font piu` grande/piu` piccolo, la dimensione si adatta di conseguenza)

Ricorda che non puoi definire la dimensione del carattere; i browser hanno la possibilita` di sovrascriverla (immagina un utente che ci vede poco, uno che ha un monitor con i px piccolissimi, uno che deve guardare il monitor da lontano, ...). I layout devono "stare assieme" anche con un raddoppio delle dimensioni del carattere.