title: Position text properly below a centered image
body: <p>I used the following code to center my image and to format my text.</p>
  
  <pre><code>IMG.center {position:fixed; top:40%; left:50%; transform:translate(-50%,-50%)}
  
  h1 span {display: block;}
  
  h1 span.major {font-family:Avenir Lt Std; font-size:30px; font-weight:bold; border:0px solid black; padding:0px; text-align: center;}
  
  h1 span.minor {font-family:Avenir Lt Std; font-size:20px; border:0px solid black; padding:0px; text-align: center;}
  </code></pre>
  
  <p>And display the elements as such. However, the text keeps floating to the top of the page.</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;IMG class="center" src="picture.png" alt="icon" style="width:596px;height:166px;"&gt; 
  
  &lt;h1&gt;
      &lt;span class="major"&gt;some text&lt;/span&gt;
      &lt;br&gt;
      &lt;span class="minor"&gt;some text&lt;/span&gt;
  &lt;/h1&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Why does the text floats to the top? and how does one move the text below the image?  The key is to center the image first and print the text relative to the image (i.e. below).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>IMG.center {position:fixed; top:40%; left:50%; transform:translate(-50%,-50%)}
  
  h1 span {display: block;}
  
  h1 span.major {font-family:Avenir Lt Std; font-size:30px; font-weight:bold; border:0px solid black; padding:0px; text-align: center;}
  
  h1 span.minor {font-family:Avenir Lt Std; font-size:20px; border:0px solid black; padding:0px; text-align: center;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;IMG class="center" src="picture.png" alt="icon" style="width:596px;height:166px;" /&gt; 
  
  &lt;h1&gt;
      &lt;span class="major"&gt;some text&lt;/span&gt;
      &lt;br&gt;
      &lt;span class="minor"&gt;some text&lt;/span&gt;
  &lt;/h1&gt;</code></pre>
  </div>
  </div>
  </p>