Подтвердить что ты не робот

Как я могу центрировать выровненный текст, даже когда он обертывается?

Мне нужно центрировать блок выравнивания по левому краю текста внутри div, но мне нужна визуальная ширина текстового блока, чтобы он был центрирован не самим блоком.

Во многих случаях это может быть одно и то же, но подумайте о случае, когда div достаточно узкий (подумайте о мобильной ширине), и текст слишком длинный, чтобы поместиться на одной строке, поэтому он должен переполняться.

В приведенных ниже примерах я показываю текстовый блок как голубой, чтобы проиллюстрировать, но на практике они будут того же цвета, что и родительский div (белый). В любом используемом тексте нет разрывов строк.

enter image description here

В 1a текст является только одной строкой и меньше максимальной ширины текстового блока, поэтому я могу установить текстовый блок в ширину текста, и нет проблемы.

В 2a текст длиннее максимальной ширины и поэтому обертывается на следующую строку. Эффект от этого заключается в том, что видимый текстовый блок больше не центрируется.

Как отображать обе эти ситуации как 1b и 2b только с использованием HTML и CSS?

Изменить 1: Кажется, все говорят мне, как достичь ситуации в 1a и 2a, но у меня уже есть это. Я хочу добиться ситуации в 1b и 2b.

Правка 2: Код, который я использую, по существу тот же, что и Давид в своей ссылке (http://jsfiddle.net/davidThomas/28aef/). Использование цвета для текстовой области просто для иллюстрации этого момента. Если вы измените это на белый (http://jsfiddle.net/28aef/2/), вы увидите, как текстовый блок больше не выглядит центрированным (т.е. левое и правое поля не являются равный)

4b9b3361

Ответ 1

Я знаю, что это старо, но у меня была одна и та же проблема, и я согласен, что ни один из них не решает проблему. Это не может быть 100% кросс-браузером (еще не закончили тестирование), но он работает!

Теперь ограничение состоит в том, что вам нужно самостоятельно выполнить разбор строки, но, похоже, это нужно делать независимо от ситуации такого рода.

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

Ответ 2

Я предполагаю, что это уже давно стало проблемой для оригинального плаката, но у меня был тот же вопрос, и я искал ответ, чтобы найти ответ. Ниже приведен результат того, что я нашел.

Отказ от ответственности: я не эксперт ни в одном из них, а у других может быть более элегантный способ справиться с этой ситуацией, но он работал для моего приложения и может работать для других приложений, поэтому я решил, что опубликую его.

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

Обратите внимание, что в приведенном выше примере первый div может не понадобиться, и поля могут быть перенесены во второй div с небольшим изменением. Портной, если необходимо, в процентах или указать ширину пикселя, и все должно быть установлено. Надеюсь, это поможет кому-то некоторое время в какой-то момент и не создает никаких новых проблем. Удачи всем.

Ответ 3

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

В принципе, первый div - ваш содержащий элемент. Вам нужно выровнять по центру центр.

Затем в вашем блоке div (синяя область) вам нужно отобразить строку в строке и текст влево, а затем установить поле (пробел, который вы хотите оставить вокруг него, когда текст обернется).