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

Question

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

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

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

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

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

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

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

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

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

Answer 2

Flexbox может пригодиться:

  .d-flex {
      display: -ms-flexbox!important;
      display: flex!important;
  }
  .flex-column {
      -ms-flex-direction: column!important;
      flex-direction: column!important;
  }
  .ml-auto, .mx-auto {
      margin-left: auto!important;
  }
  mr-auto, .mx-auto {
      margin-right: auto!important;
  }
  .w-50 {
      width: 50%!important;
  }

<div class="d-flex flex-column mx-auto w-50">
  <p>Left aligned text</p>
  <p><em>Aenean sed lectus massa, quis fringilla magna. Morbiporta sapien quis ligula viverra condimentum non vel nunc. Ut ac pulvinar nibh. Sed vitae eros et purus ullamcorper fermentum eu a libero. Curabitur vitae dolor ligula, varius tincidunt arcu. Quisque lectus magna, semper sed tincidunt nec, mattis vel justo.</em></p>
  <p>Using <a href="https://getbootstrap.com/docs/4.1/utilities/flex/">Bootstrap 4</a> classes.</p>
</div>

Answer 3

Я знаю, что это старо, но на него не было ответа.Это можно сделать с помощью calc () vh и vw (единицы просмотра), как минимум, и некоторой математики.Хитрость, кажется, заключается в том, чтобы вручную установить левую и верхнюю часть по центру.Я использовал единицы просмотра для их точности и постоянно меняющегося эффекта.

    .clr	{ clear:both; }
    .bg666	{ background:#666;}  
    .bgf4	{ background: #f4f4f4; }
    .hv60	{ height: 60vh; }
    .hv50	{ height: 50vh; }
    .wv60	{ width: 60vw; }
    .wv50	{ width: 50vw; }
    .tlset	{ position:relative; left: 30px; top: 30px; }
    .true_cntr_inner { position:relative; left: calc(60vw - 50vw - 5vw);  top: calc(60vh - 50vh - 5vh); } /* left = (60% - 50% of inner block / 2);*/

    <div class = 'clr wv60 hv60 bg666 tlset'>
        <div class = 'clr wv50 hv50 true_cntr_inner bgf4'>
            this is some text that spans acrossed 50% of the viewport. 
            I state the obvious because I believe people can see the obvious and I 
            was wrong a lot. Now it has become somewhat of a habit like bad spelling 
            so forgive me. 
        </div>
    </div>

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

Answer 4

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

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

<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 с небольшими изменениями. При необходимости подгоняйте проценты или задавайте ширину в пикселях, и все будет готово. Надеюсь, это сэкономит кому-то время и не создаст никаких новых проблем. Удачи всем.

Answer 5

<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 (синяя область) необходимо отобразить встроенный текст и выровнять текст по левому краю, а затем установить поле (пробел, который нужно оставить вокруг него при переносе текста).