Come posso centrare il testo allineato a sinistra anche quando si esegue il wrapping?

Question

Ho bisogno di centrare un blocco di testo allineato a sinistra all'interno di un div, ma ho bisogno che la larghezza visiva del blocco di testo sia centrata non sul blocco stesso.

In molti casi, potrebbe essere la stessa cosa, ma si pensi a un caso in cui il div è abbastanza ristretto (si pensi alle larghezze mobili) e il testo sia troppo lungo per adattarsi a una riga, quindi è necessario un overflow.

Negli esempi seguenti, sto mostrando il blocco di testo come blu chiaro per illustrare, ma in pratica saranno dello stesso colore del div genitore (bianco). Non ci sono anche interruzioni di riga in alcun testo usato.

Nel 1a, il testo è solo una linea ed è inferiore alla larghezza massima del blocco di testo, quindi possibile impostare il blocco di testo alla larghezza del testo e là isn è un problema

In 2a tuttavia, il testo è più lungo della larghezza massima e quindi si estende alla riga successiva. L'effetto di ciò è che il blocco di testo visibile non appare più centrato.

Come posso visualizzare entrambe queste situazioni come 1b e 2b solo utilizzando HTML e CSS?

Modifica 1: Sembra che tutti mi stiano dicendo come raggiungere la situazione in 1a e 2a, ma l'ho già. Voglio raggiungere la situazione in 1b e 2b.

Modifica 2: il codice che sto utilizzando è essenzialmente lo stesso di quello che David ha dato nel suo collegamento (http://jsfiddle.net/davidThomas/28aef/). L'uso di un colore per l'area di testo è solo per illustrare questo punto però. Se si modifica che al bianco (http://jsfiddle.net/28aef/2/) si può vedere come il blocco di testo non appare più centrato (vale a dire i margini sinistro e destro non sono uguali)

Answer 1

<div style="text-align:center;"> 
    <div style="display:inline; text-align:left; margin:20px;"> <!-- or whatever width you want that block to be at --> 
      Content here 
    </div> 
</div> 

In sostanza, il primo div è il vostro elemento che contiene. È necessario allineare il testo al centro.

Quindi, nel div del blocco (l'area blu), è necessario visualizzare inline e testo allineato a sinistra, quindi impostare un margine (lo spazio bianco che si desidera mantenere attorno ad esso quando il testo si avvolge).

Answer 2

So che questo è vecchio, ma ho appena avuto lo stesso problema, e sono d'accordo sul fatto che nessuno di questi lo risolva. Questo potrebbe non essere al 100% cross-browser (non hanno fatto test) ma funziona!

Ora la restrizione è che devi mettere da solo l'interruzione di linea, ma sembra che sia ciò che deve essere fatto indipendentemente da questo tipo di situazione.

http://jsfiddle.net/28aef/2/

div.textContainer { 
    text-align: center; 
    border: 1px solid #000; 
    height: 100px; 
    padding: 10px 0; 
} 

div.textContainer p { 
    display: inline-block; 
    text-align: left; 
} 

Answer 3

Sto indovinando questo è da tempo diventato un non-problema per il manifesto originale, ma ho avuto la stessa domanda ed è stato googling per trovare una risposta. Di seguito è il risultato di ciò che ho trovato.

Disclaimer: Non sono un esperto di questo e altri possono avere un modo più elegante per gestire questa situazione, ma ha funzionato per la mia applicazione e potrebbe funzionare per altre applicazioni, quindi ho pensato di pubblicarlo.

<div style = "text-align: center; margin-left: 10%; margin-right: 10%"> 
    <div style = "display: inline-block; text-align: left;"> 
     Desired text goes here. 
    </div> 
</div> 

noti che nel suddetto primo div possono non essere necessarie ei margini possono essere spostati nella seconda div con pochi cambiamenti. Adatta, se necessario, alle percentuali o specifica una larghezza di pixel e dovresti essere tutto pronto. Speriamo che questo salvi qualcuno a un certo punto e non crei nuovi problemi. Buona fortuna a tutti.