title: How to horizontally center align a span inside a div
body: <p>I have a DIV and a SPAN. I would like to center the SPAN horizontally inside the DIV.</p>
  
  <p>I am trying to center that inside the headerRibbon div but no matter what code I use, it's not working.</p>
  
  <p>I am loading the mobile stylesheet shown above like this:</p>
  
  <pre><code>&lt;!-- default stylesheets --&gt;
  &lt;link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css" /&gt;&lt;link rel="stylesheet" type="text/css" href="theStyles/captionStyle.css" /&gt;
  
  &lt;!-- mobile stylesheets
  &lt;link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_mobile.css" media="only screen and (max-device-width: 480px) and (min-device-width : 320px)" /&gt;&lt;link rel="stylesheet" type="text/css" href="theStyles/captionStyle_mobile.css" media="only screen and (max-device-width: 480px) and (min-device-width : 320px)" /&gt;--&gt;
  
  &lt;link rel="stylesheet" media="screen and (max-width: 480px)" href="theStyles/defaultStyle_mobile.css" /&gt;&lt;link rel="stylesheet" media="screen and (max-width: 480px)" href="theStyles/captionStyle_mobile.css" /&gt;
  
  &lt;!-- if ie version 9 or less --&gt;
  
  &lt;!--[if lte IE 9]&gt;
  &lt;link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_ie.css" /&gt;&lt;link rel="stylesheet" type="text/css" href="theStyles/captionStyle_ie.css" /&gt;
  &lt;![endif]--&gt;
  </code></pre>
  
  <p>The <code>div</code> is displayed as <code>block</code> once it slides down on page load:</p>
  
  <p><img src="https://i.stack.imgur.com/HvlK6.png" alt="enter image description here"></p>
  
  <p>How can I fix it?</p>