title: How to center spans inside an Ionic ion-scroll
body: <p>I want to vertically center a "list" of <code>&lt;span&gt;</code> elements horizontally in an Ionic <code>ion-scroll</code>, and have tried just about every "centering" style I can find, but just cannot get it to center...</p>
  
  <pre><code>&lt;body ng-app='app' ng-controller='Index as vm'&gt;
   &lt;ion-content scroll=false&gt;
        &lt;div style="padding: 0px;height=80px;width:30%;align=center" &gt;
        &lt;ion-scroll class="center" scrollbar-x=false direction="x" 
              style="text-align:center;background-color:pink;height: 80px;width:99%;white-space: nowrap"&gt;
            &lt;span class='center' style="text-align:center;margin:5px;background-color:red;align=center" ng-repeat='d in vm.data'&gt;{{d}}&lt;/span&gt;
         &lt;/ion-scroll&gt;
          &lt;/div&gt;
      &lt;/ion-content&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/amJPDSNWfCYgfcR3dWNH" rel="nofollow">Here</a> is the Plunk for the above.</p>
  
  <p>I have colored the <code>&lt;span&gt;</code> elements red, and the container pink so we can see where the <code>&lt;span&gt;</code>are relative to the container.</p>
  
  <p>Anyone have any suggestions here?</p>
  
  <p>Thanks in advance for any help.</p>