Question

我创建了<div> height:22px;和line-height:22px;，使文字垂直居中。
还有<input> height:22px;（输入中的文字会自动对齐）。

我注意到某些浏览器的垂直对齐方式不正确，特别是在移动设备上。

有一个替代属性可以垂直居中文本，而不是行高吗？

如何在输入框中正确居中文本？

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

0下方和9将文本水平和垂直放置在内部。

.mydiv

.myinput

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>

行高在不同的浏览器上运行不正常

2 个答案: