How can I centre left aligned text even when it wraps?

Question

I need to centre a block of left aligned text within a div, but I need the visual width of the text block to be centred not the block itself.

In many cases this may

Answer 1

I know this is old but it has not been answered. It can be done with calc() vh and vw(viewport units), at least, and some math. The trick seems to be setting the left and top to center manually somewhat. I used viewport units for their accuracy and ever changing effect.

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

I was looking for a solution to center and resize my text containing DIV on window resize. I ran across this post and found my workaround after realizing there was an issue using the regular CENTER method. I hope it helps.

Answer 2

Flexbox may be good to go:

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

<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

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

Basically, the first div is your containing element. You need to text-align center.

Then, in your block div (the blue area), you need to display inline and text align left, then set a margin (the white space you want to remain around it when the text wraps).

Answer 4

I know this is old, but I just had the same issue, and I agree that none of these solve it. This one may not be 100% cross-browser (haven't done testing) but it works!

Now the restriction is you have to put in the line-break yourself, but it seems that is what needs to be done regardless in this kind of situation.

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 5

I'm guessing this has long since become a non-issue for the original poster but I had the same question and was googling to find an answer. Below is the result of what I found.

Disclaimer: I'm not an expert at any of this and others may have a more elegant way to handle this situation but it worked for my application and may work for other applications so I figured I'd post it.

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

Note that in the above the first div may not be needed and the margins can be moved to the second div with little change. Tailor, as needed, on the percentages or specify a pixel width and you should be all set. Hopefully this saves someone some time at some point and doesn't create any new issues. Best of luck all.