title: CSS Vertically Align Text in Header
body: <p>I am trying to vertically align text in my header, and am having some trouble.  Attached is an image of my starting point:</p>
  
  <p><img src="https://i.stack.imgur.com/XFIaW.jpg" alt="Preview"></p>
  
  <p>The header has a set height of 141px and everything in that header should be right in the middle.  Even the <em>"Name of Website Here"</em>, so if that name changes and only takes up 1 line, or maybe 3 lines it will all be in the same place.</p>
  
  <p><strong>Note:</strong> this is for multiple websites, which are being generated dynamically so that's why I cannot just position it with a <code>margin-top</code> because the names will be different, some might take up a few lines and some might take up multiple lines.</p>
  
  <hr>
  
  <p>I took out my attempts to vertically align it from what I searched online because nothing is working so this is the code from my starting point. </p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="header"&gt;
      &lt;h1&gt;Name of Website Here&lt;/h1&gt;
      &lt;h3&gt;Call Today!&lt;br /&gt;&lt;span&gt;(xxx) xxx-xxxx&lt;/span&gt;&lt;/h3&gt;
      &lt;p&gt;123 Main St.&lt;br /&gt;City, State, Zip&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#header{height:141px;}
  #header h1{float:left;font-size:1.7em;width:200px;text-align:center;line-height:26px}
  #header h3{float:left;text-align:center;color:#e62520;font-size:1.7em;line-height:26px;font-style:italic;margin:0 0 0 95px}
  #header h3 span{font-size:1.2em;}
  #header p{float:right;color:#2a5091;font-size:1.3em;font-style:italic;font-weight:bold;line-height:20px;text-align:right;}
  </code></pre>
  
  <p>Thank you!</p>