title: Media Queries - Center Content
body: <p>When my website is full size, I have content in the footer aligned to the left and right, as follows;</p>
  
  <pre><code>&lt;div class="site-info"&gt;
  &lt;span class="left"&gt;© Client 2016&lt;/span&gt;
  &lt;span class="right"&gt;Site by&lt;a href="#"&gt;&lt;img class="credits-img" src="http://voicecoaches.com/wp-content/uploads/2010/08/john_text.png" width="50px" align="right"&gt;&lt;/a&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Using this CSS;</p>
  
  <pre><code>.right {
     float: none;
  }
  
  .left {
     float: none;
  }
  </code></pre>
  
  <p>When the website is displayed on a phone, I want the content in the span classes to be displayed in the middle of the screen, with the '© Client 2016' text being displayed on one line, and the text/image link being displayed on another line below it, both centered. Any help is appreciated, thanks</p>