さまざまなブラウザでline-heightが正しく動作しない

Question

とheight:22px;とline-height:22px;を縦に並べると作成されました。
またとheight:22px;（入力のテキストは自動的に揃えられます）。

一部のブラウザ、特にモバイルでは、垂直方向の配置が正しくないことがわかりました。

line-height以外のテキストを縦にセンタリングする代わりのプロパティがありますか？

テキストを入力ボックスに正しく配置するにはどうすればよいですか？

.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>

Answer 1

あなたはCSSのフレキシボックスを試してみましたか？これは、親div内の子のレイアウトと配置を制御するのに最適な方法です。ここで詳細を知ることができます：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.mydivと.myinput以下は、テキストを完全に水平と垂直の内側に配置します。

.myinput{ 
 
    width: 50px; 
 
    height: 22px; 
 
    font-size: 9px; 
 
    font-family: Arial; 
 
    text-align: center; 
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
} 
 
.mydiv{ 
 
    width: 50px; 
 
    height: 22px; 
 
    font-size: 9px; 
 
    font-family: Arial; 
 
    text-align: center; 
 
    
 
    display:flex; 
 
    justify-content:center; 
 
    align-items:center; 
 
    
 
    border: 1px solid black; 
 
}

<input type="text" class="myinput" value="EXAMPLE"/> 
 
<div style="height:10px;"></div> 
 
<div class="mydiv">EXAMPLE</div>

Answer 2

それを行うにはいくつかの方法があります - たぶん、あなたが問題を見ているブラウザと私たちは最良の答えを収めることができたとの質問を更新します。

このような何かが非常に簡単であり、ほとんどのブラウザで動作するはずです。..

.wrapper { 
 
height:22px; 
 
background:#fff; 
 
width: 100px; 
 
text-align:center; 
 
border:1px solid #000; 
 
} 
 

 
.wrapper:before { 
 
content:""; 
 
height:100%; 
 
display:inline-block; 
 
vertical-align: middle 
 
} 
 

 
.middle { 
 
display:inline-block; 
 
}

<div class="wrapper"> 
 
<div class="middle">Here we go</div> 
 
</div>