line-height 在不同的浏览器上工作不正确

Question

我用 height:22px; 和 line-height:22px; 创建了一个 <div> 来使文本垂直居中。
还有一个 <input> 和 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 flexbox 吗？这是控制子级在父级中的布局和位置的好方法 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>

line-height 在不同的浏览器上工作不正确

line-height works incorrectly on different browsers

html

css

text

input

vertical-alignment