title: How can I centre left aligned text even when it wraps?
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p><img src="https://i.stack.imgur.com/uNNZs.png" alt="enter image description here"></p>
  
  <p>In the <em>1a</em>, 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.</p>
  
  <p>In <em>2a</em> 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.</p>
  
  <p><strong>How can I display both of these situations as <em>1b</em> and <em>2b</em> only using HTML and CSS?</strong></p>
  
  <p>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. </p>
  
  <p>Edit 2: The code I'm using is essentially the same as what David gave in his link (<a href="http://jsfiddle.net/davidThomas/28aef/" rel="noreferrer">http://jsfiddle.net/davidThomas/28aef/</a>).  The use of a colour for the text area is just to illustrate this point though.  If you change that to white (<a href="http://jsfiddle.net/28aef/2/" rel="noreferrer">http://jsfiddle.net/28aef/2/</a>) you can see how the text block no longer looks centred (i.e. left and right margins aren't equal)</p>