title: css line-height not working on mobile device
body: <p>I have tried to align some items vertical middle using line-height in my hyprid app (ionic)</p>
  
  <p>how i basically did:
  <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrapper {
      height: 35px;
    }
  
  .item {
      background: lightgreen;
      float: left;
      height: 100%;
    }
  
  .item span {
      line-height:35px;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
     &lt;div class="item"&gt;
       &lt;span class="icon-check"&gt;&lt;/span&gt;
       &lt;span&gt;818&lt;/span&gt;
     &lt;/div&gt;   
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What does not work:</p>
  
  <p>In chrome developer mode everything works great: the text is perfect aligned center to the green container..</p>
  
  <p>..but when i render the app on my device (iphone4s ios8.4.1 app: ionic view) the text is no longer vertical centered:</p>
  
  <p><a href="https://i.stack.imgur.com/ALTQG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ALTQG.png" alt="enter image description here"></a></p>
  
  <p>ex.: if you have a look at the "2" beside the eye-icon u can see that the "2" is not exactly vertical</p>
  
  <p>my Question:
  why is there a different between text-displaying in desktop browser and mobile app?
  can i fix this?</p>
  
  <p>Thanks</p>
  
  <p>PS: also tryed to center vertical with flex and table-cell but both mothods get the same little different between desktop and mobile</p>
  
  <p>Edit: I aligned the intems again using translate(-50%) and line-height: 1; here is my result:</p>
  
  <p><a href="https://i.stack.imgur.com/xR07x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xR07x.png" alt="enter image description here"></a></p>
  
  <p>after I changed font-family:</p>
  
  <p><a href="https://i.stack.imgur.com/GA1mU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GA1mU.png" alt="enter image description here"></a></p>
  
  <p>therefore the font-family is responsible for the render issue.
  Do I have to choose an other font or is there a way to fix this with the give font ? (on desktop version that doesn't occur ..everything looks great)</p>