line-height works incorrectly on different browsers

19 views
0

I’ve created a <div> with height:22px; and line-height:22px; to center vertically the text.
And also an <input> with height:22px; (the text in the input is automatically aligned).

I noticed that the vertical alignment is incorrect with some browser, in particular on mobile.

There is an alternative property to center vertically the text, other than line-height?

And how to center the text correctly in an input-box?

.myinput{
  width: 50px;
  height: 22px;
  font-size: 9px;
  font-family: Arial;
  text-align: right;
}
.mydiv{
  width: 50px;
  height: 22px;
  line-height: 22px;
  font-size: 9px;
  font-family: Arial;
  text-align: center;
  
  border: 1px solid black;
}
<input type="text" class="myinput" value="EXAMPLE"/>
<div style="height:10px;"></div>
<div class="mydiv">EXAMPLE</div>