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 be the same thing, but think of a case where the div is fairly narrow (think mobile widths) and the text is too long to fit on one line, so it needs to overflow.

In the examples below, I am showing the text block as light blue to illustrate, but in practice they will be the same colour as the parent div (white). There are also no line breaks in any text used.

In the 1a, the text is only one line and it is smaller than the maximum width of the text block, so I can set the text block to the width of the text and there isn't a problem.

In 2a however, the text is longer than the maximum width and so wraps to the next line. The effect of this is that the visible text block doesn't appear centred any more.

How can I display both of these situations as 1b and 2b only using HTML and CSS?

Edit 1: It seems that everyone is telling me how to achieve the situation in 1a and 2a, but I already have that. I want to achieve the situation in 1b and 2b.

Edit 2: The code I'm using is essentially the same as what David gave in his link (http://jsfiddle.net/davidThomas/28aef/). The use of a colour for the text area is just to illustrate this point though. If you change that to white (http://jsfiddle.net/28aef/2/) you can see how the text block no longer looks centred (i.e. left and right margins aren't equal)

Answer 1

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 2

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.

Answer 3

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 4

Expanding upon the workaround I commented on the question, I found two more on the same less-than-ideal line, so I thought I'd put them together, along with a visual comparison, in case it helps someone. The only advantages are that they don't require JS and work with wrapped text (i.e., without manually adding new lines).

1. text-align: text-align: justify; — may leave ugly spaces between words, more often in short texts with long words.
2. hyphens: -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; — doesn't really fill all of the pseudo-right-margin
3. word-break: word-break: break-all; — centered but breaks words as soon as it touches the edge
4. A combination of the previous options.

For words that'd overflow the container, we need to add overflow-wrap: break-word;. The reason why I left that commented out was to show the difference in how each example treats long "syllables". Note that it doesn't add a hyphen (similar to word-break: break-all;).

---

• Part of these workarounds were adapted from justmarkup.com website.

• If adding manual <br> is an option, then John's answer is likely more appropriate.

• If JS is also an option, go to my comment above and then follow the link, or not.

• I'd also mentioned CSS media queries as they're proposed as a solution along with the JS one. However, I looked into them and I don't believe they'd work in this case as they require having content with a predictable size in order to be able to calculate the size of the container beforehand. All it does is check the size of the veiwport (visible area) so that when it falls into (or out of) a preset range the container is set to one of the predefined sizes. But in our case, we can't predict the optimal container size for any random text.

• Container queries don't solve the problem either as they don't allow us to check the width of the text, just of the box containing it. If we set display: contents to prevent the box from being created, then the width will be 0px.

• The issue is mentioned on a recent Chrome blog entry about balanced text. I'm quoting it because they're aware of it and I believe the same technique could be applied in order to fix it:

. . .

Balanced text wrapping ironically creates imbalance to the contained element.

A brief explanation of the technique the browser is using

The browser effectively performs a binary search for the smallest width which doesn't cause any additional lines, stopping at one CSS pixel (not display pixel). To further minimize steps in the binary search the browser starts with 80% of the average line width.

div {
  width: 10em;
  margin: 0 auto 1em auto;
  border: 1px solid #000;
  padding: 1em;
  background-color: lightgreen;
  /* overwritten in case 0 */
  
}

.text0 {
  text-align: justify;
}

.text1 {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

.text2 {
  word-break: break-all;
}

h1 {
  text-align: center;
}

p {
  background-color: aqua;
  /*overflow-wrap: break-word;*/
}

<!DOCTYPE html>
<html lang="en">
<!-- !DOCTYPE and html tags are required for the hyphens to work in this example -->

<body>
  <h1>Justify</h1>
  <div class="text0">
    <p>This is a bit of text displaying on more than two lines. Try to bbbbbbbbbbbbbbbbbbbbbbbreak this word.</p>
  </div>

  <h1>Hyphens</h1>
  <div class="text1">
    <p>This is a bit of text displaying on more than two lines. Try to bbbbbbbbbbbbbbbbbbbbbbbreak this word.</p>
  </div>

  <h1>break-all</h1>
  <div class="text2">
    <p>This is a bit of text displaying on more than two lines. Try to bbbbbbbbbbbbbbbbbbbbbbbreak this word.</p>
  </div>
  
  <h1>Justify and break-all</h1>
  <div class="text0 text2">
    <p>This is a bit of text displaying on more than two lines. Try to bbbbbbbbbbbbbbbbbbbbbbbreak this word.</p>
  </div>
  
  <h1>Justify and hyphens</h1>
  <div class="text0 text1">
    <p>This is a bit of text displaying on more than two lines. Try to bbbbbbbbbbbbbbbbbbbbbbbreak this word.</p>
  </div>
</body>

</html>

Answer 5

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 6

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