Jak wycentrować tekst wyrównany do lewej strony, nawet jeśli jest zawijany?

Question

Potrzebuję wyśrodkować blok wyrównany do lewej strony w obrębie elementu div, ale potrzebuję szerokości wizualnej bloku tekstu, który ma być wyśrodkowany, a nie samego bloku.

W wielu przypadkach może to być to samo, ale pomyśl o przypadku, w którym element div jest dość wąski (myśl o szerokości komórki), a tekst jest zbyt długi, aby zmieścił się w jednej linii, więc musi zostać przepełniony.

W poniższych przykładach pokazuję blok tekstu jako jasnoniebieski w celu zilustrowania, ale w praktyce będą one miały ten sam kolor, co element nadrzędny (biały). W żadnym z tekstów nie ma również żadnych podziałów linii.

W 1a tekst jest tylko jedna linia i jest mniejsza niż maksymalna szerokość bloku tekstu, aby można było ustawić blok tekstu szerokości tekstu i nie isn problem.

W 2a tekst jest jednak dłuższy niż maksymalna szerokość, a więc jest zawijany do następnej linii. Efektem tego jest to, że widoczny blok tekstowy nie wydaje się już wyśrodkowany.

Jak mogę wyświetlić obu tych sytuacjach jak 1b i 2b tylko przy użyciu HTML i CSS?

Edytuj 1: Wydaje się, że wszyscy mówią mi, jak osiągnąć sytuację 1a i 2a, ale już to mam. Chcę osiągnąć sytuację w punktach 1b i 2b.

Edytuj 2: Kod, którego używam, jest w zasadzie taki sam jak ten, który podał David w swoim linku (http://jsfiddle.net/davidThomas/28aef/). Użycie koloru dla obszaru tekstowego jest jednak tylko ilustracją tego punktu. Jeśli zmieni się na biały (http://jsfiddle.net/28aef/2/) można zobaczyć, jak blok tekstu nie wygląda skupione (czyli lewy i prawy margines nie są równe)

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> 

Zasadniczo, pierwszy div jest twój zawierający elementem. Musisz wyrównać do środka tekstu.

Następnie, w bloku div (niebieskim obszarze), należy wyświetlić wyrównanie w linii i tekstu w lewo, a następnie ustawić margines (biały obszar, który ma pozostać wokół niego, gdy tekst jest zawijany).

Answer 2

Wiem, że to jest stare, ale po prostu miałem ten sam problem i zgadzam się, że żaden z nich nie rozwiązuje problemu. Ten nie może być w 100% w różnych przeglądarkach (nie testowałem), ale działa!

Teraz ograniczenie polega na tym, że sam musisz przerwać linię, ale wydaje się, że to właśnie należy zrobić niezależnie od tego rodzaju sytuacji.

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

Zgaduję, to już dawno stał się non-problem dla ich twórców, ale miałem to samo pytanie i został googling znaleźć odpowiedź. Poniżej znajduje się wynik tego, co znalazłem.

Nota prawna: Nie jestem ekspertem w żadnej z tych dziedzin i inni mogą mieć bardziej elegancki sposób na radzenie sobie z tą sytuacją, ale zadziałało to dla mojej aplikacji i może pracować dla innych aplikacji, więc pomyślałem, że to opublikuję.

<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> 

Zauważ, że w powyższym pierwszym div może nie być potrzebne, a marże mogą zostać przeniesione do drugiego div z niewielkimi zmianami. Dostosuj w razie potrzeby wartości procentowe lub określ szerokość piksela i powinieneś wszystko ustawić. Mam nadzieję, że to w pewnym momencie uratuje kogoś i nie spowoduje żadnych nowych problemów. Powodzenia wszystkim.