Testo centrato con allineamento a sinistra

**azazello** · 02-01-2006, 22:12

Salve a tutti.
Vi propongo un problema che ho trovato in vari forum, ma mai risolto del tutto.

Si tratta di creare uno spazio di testo (di cui non è definita la larghezza) che sia internamente allineato a sinistra, ma nel suo complesso centrato... ad esempio una poesia con i versi che iniziano tutti dalla stessa colonna, e il verso più lungo è perfettamente centrato nella pagina.

Verrebbe spontaneo creare un div con margin-right e left :auto e text-align:left, ma explorer non lo prende e anche se aggiungo un text-align:center al contenitore non risolvo il problema.

Per adesso ho risolto creando una tabella con un unica cella.
Foglio di stile:

body {text-align: center;} //per internet explorer (in ogni caso mi seve per i testi, quasi tutti centrati)
table {margin-left: auto;
margin-right: auto;}
td, th {text-align: left;}

sostituendo a "table" e "td" dei div, la cosa non funziona con explorer.

Sarebbe bello evitare di usare le tabelle per la formattazione... Avete qualche proposta?

Grazie 1000 per ogni risposta.
Saluti

Federico

**Mich_** · 09-01-2006, 10:40

La cosa va risolta in modo diverso nei browser conformi e in IE.

l'HTML:

codice:

<div id="contPoesia">
  <p class="poesia">
    Nel mezzo del cammin di nostra vita
    mi ritrovai per una selva oscura
    che la diritta via era smarrita 
    ...
  


</div>

Il CSS:

codice:

<style ...>
#contPoesia {
  text-align: center; /* serve per IE */
  ... 
}
.poesia {
  text-align: left;   /* per eliminare il center sopra */
  margin: 0 auto;     /* per i browser conformi */
  border: 0;
  padding: 0;         /* per differenze tra IE e altri /*
}

Questo dovrebbe funzionare, e non fa uso di tabelle.

Nota che per la poesia ho usato un

(non un <div>), che e` piu` corretto dal punto di vista semantico ed e` valido anche per XHTML Strict (non si puo` scrivere direttamente nei <div>).

**azazello** · 09-01-2006, 13:25

Purtroppo non sembra essere così semplice... (almeno che non abbia sbagliato qualcosa)

A questo indirizzo ho riportato il codice che mi hai suggerito.

Che ne dici?

**Mich_** · 09-01-2006, 13:40

Se vuoi che la cosa si veda, devi dare una dimensione al blocco esterno, altrimenti i margini si annullano.

Esempio:

codice:

<body>

<div style="text-align:center; width: 80%; border: 1px solid red;">
  <p style="text-align:left; margin: 0 auto; border:1px solid green; padding:0;">
    Nel mezzo del cammin di nostra vita 


    mi ritrovai per una selva oscura 

    che la diritta via era smarrita 

    ...
  


</div>

Nota che i bordi li ho inseriti per visualizzare il posizionamento dei vari blocchi, poi andranno tolti.

**azazello** · 09-01-2006, 13:54

Fatto.
Il punto è che

occupa in larghezza tutto il <div>, non assumendo automaticamente la "larghezza minima" (quella del verso più lungo), e quindi non venendo nemmeno centrato.
Forse dovrei definire io la larghezza di

(è quello che mi hanno proposto di fare in altri forum), ma in questo modo non posso creare una classe per tutte le poesie...

Pagina dove trovi il codice

**Mich_** · 09-01-2006, 15:50

Capisco il problema.
Mi pareva che la dimensione del

dovesse essere la minore possibile.

Potresti dare al

una larghezza espressa in em, ma dovresti conoscere la larghezza (in caratteri) della strofa piu` lunga di ciascuna poesia.

Prova anche a dare al

padding: 0 auto;
forse e` piu` sensibile al contenuto interno, ma poi occorre trovare un hack per il browser IE.

**azazello** · 09-01-2006, 17:26

Modificare il padding non aiuta.

Ti ringrazio in ogni caso del tempo che mi hai dedicato.

Se in futuro troverò qualche altra soluzione, vedrò di postarla in questo forum.

Saluti,

Federico

Discussione: Testo centrato con allineamento a sinistra

Strumenti discussione

Ricerca discussione

Visualizza

Testo centrato con allineamento a sinistra

Permessi di invio