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

【问题标题】：line-height works incorrectly on different browsersline-height 在不同的浏览器上工作不正确
【发布时间】：2018-05-25 13:52:36
【问题描述】：

我创建了一个带有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>

【问题讨论】：

标签： html css text input vertical-alignment

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：