title: HTML put several elements on one line and centre on screen
body: <p>I want to put 3 text elements next to each other on one row and centre the combined elements on the screen.</p>
  
  <p>Currently my code is this</p>
  
  <pre><code>&lt;div class="area"&gt;
    &lt;h1 align="center"&gt;Heading&lt;/h1&gt;
    &lt;h2 align="center" id="text1"&gt;&lt;/h2&gt;
    &lt;h2 id="text2" &gt;&lt;/h2&gt;
    &lt;h2 id="text3" &gt;&lt;/h2&gt;
    &lt;hr/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The text1-3 characters are populated via javascript (no jQuery) ie:</p>
  
  <pre><code>document.getElementById('text1').innerHTML = newText;
  </code></pre>
  
  <p>I can work out how many characters will be in each text element prior to calling the HTML page, so that the total can be calculated if that is required to centre to combined text areas on the screen.</p>
  
  <p>Currently the Text1 element is centred fine, however text2 and 3 are on new lines and are located on the LHS of the screen.</p>
  
  <p>Any ideas?</p>