Мне нужно центрировать блок выравнивания по левому краю текста внутри div, но мне нужна визуальная ширина текстового блока, чтобы он был центрирован не самим блоком.
Во многих случаях это может быть одно и то же, но подумайте о случае, когда div достаточно узкий (подумайте о мобильной ширине), и текст слишком длинный, чтобы поместиться на одной строке, поэтому он должен переполняться.
В приведенных ниже примерах я показываю текстовый блок как голубой, чтобы проиллюстрировать, но на практике они будут того же цвета, что и родительский div (белый). В любом используемом тексте нет разрывов строк.
В 1a текст является только одной строкой и меньше максимальной ширины текстового блока, поэтому я могу установить текстовый блок в ширину текста, и нет проблемы.
В 2a текст длиннее максимальной ширины и поэтому обертывается на следующую строку. Эффект от этого заключается в том, что видимый текстовый блок больше не центрируется.
Как отображать обе эти ситуации как 1b и 2b только с использованием HTML и CSS?
Изменить 1: Кажется, все говорят мне, как достичь ситуации в 1a и 2a, но у меня уже есть это. Я хочу добиться ситуации в 1b и 2b.
Правка 2: Код, который я использую, по существу тот же, что и Давид в своей ссылке (http://jsfiddle.net/davidThomas/28aef/). Использование цвета для текстовой области просто для иллюстрации этого момента. Если вы измените это на белый (http://jsfiddle.net/28aef/2/), вы увидите, как текстовый блок больше не выглядит центрированным (т.е. левое и правое поля не являются равный)