Question

现状

在一个简单的网站上，我有一个带有修复高度的输入控件，我有一个具有特定字体大小的文本。我希望该文本在输入字段的中间垂直对齐显示。但即使我使用了重置css（链接here）并将-webkit-appearance设置为none，它仍然没有居中。

你可以看到，对于IE来说，顶部的填充更高，对于iOS来说甚至更糟。还有12个像素填充。

一些代码

HTML：

<!-- time -->
<input type="text" class="meeting-time" style="-webkit-appearance: none; padding: 0px; inn" value="00:00"/>

CSS：

.meeting-time {
    margin: 0;
    padding: 0;
    width: 100px;
    height: 37px;
    text-align: center;
    font-family: "roboto",sans-serif;
    font-style: normal;
    font-size: 37px;    
    font-weight: 300;
    background: yellow;
    vertical-align: middle;
    -webkit-appearance: none;
}

实际问题

如何在文本字段中为所有浏览器垂直对齐文本字段。

我知道这已经被问了好几次，但是提出的解决方案到目前为止还没有成功。我想念它可能是微不足道的。

Answer 1

问题是由输入字段的height属性与字体结合使用引起的。正确删除height文本会使输入字段内的文本居中。

这可能是因为有些字符在00:00基线下方增长，例如字母p，q等，所以字体的垂直中心低于＆＃34; 00：00＆＃34;垂直中心。字体大小包括在字体大小之上扩展的边界。检查下图中的顶部和底部轴承线：

作为一种解决方案，我会删除高度并使用产生所需高度的字体大小。

另外作为旁注，37px输入字段还包括2px的边框大小（1px顶部边框和1px底部边框），因此使用35px字体大小更适合您的示例。

Answer 2

<强>更新

取消@scooterlord关于移除身高的建议，它解决了90％的问题。 10％仍然是使用iOS的4px偏移，这与我的第一个解决方案是同一个问题。不同的是，在不再指定高度的情况下，我能够添加4px padding-top来对齐iOS，并且它没有在桌面浏览器上推送字体。所以基本上：

移除高度

添加padding-top: 4px;

请参阅代码段2和/或CODEPEN

<强> OLD

对于美学而言，有一些变化更多的是对于具有重要性的变化的跨浏览器兼容性，它们用/* ✎ */表示。在Chrome，Firefox，Edge和IE中测试过。我尝试了我的iPhone 5，但是我没有耐心试图导航到这个页面（我有5个左手拇指）

<强> IE11 SNIPPET 1

html {
  /* ✎ */
  font: 300 16px/1.428 "roboto", sans-serif;
  /* ✎ */
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

*,
*::before,
*::after {
  /* ✎ */
  box-sizing: border-box;
  /* ✎ */
  margin: 0;
  /* ✎ */
  padding: 0;
  /* ✎ */
  border: 0;
}

.meeting-time {
  width: 100px;
  height: 37px;
  text-align: center;
  /* ✎ */
  font: inherit;
  /* ✎ */
  font-size: 2.3125rem;
  /* ✎ */
  line-height: 100%;
  background: yellow;
  /* ✎ */
  vertical-align: middle;
  -webkit-appearance: none;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet">


<input type="text" class="meeting-time" style="-webkit-appearance: none; padding: 0px;" value="00:00" />

SNIPPET 2

html {
  /* ✎ */
  font: 300 16px/1.428 "roboto", sans-serif;
  /* ✎ */
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

*,
*::before,
*::after {
  /* ✎ */
  box-sizing: border-box;
  /* ✎ */
  margin: 0;
  /* ✎ */
  padding: 0;
  /* ✎ */
  border: 0;
}


/* For iOS BEGIN */


/* ✎ */

input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=search] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  box-shadow: none;
}


/* For iOS  END */


/* For demo (optional) BEGIN */

main {
  height: auto;
  width: 100%;
  padding: 2vh 2vw;
}

header {
  display: table;
}

hgroup {
  display: table-row;
}

h5 {
  text-align: right;
  font: inherit;
  font-weight: 700;
  font-size: 1.2rem;
  width: 150px;
}

h6 {
  display: table-cell;
  width: 100px;
  font: inherit;
}

hr {
  height: 0;
  margin: 1.25em auto;
  border: 0 none transparent;
  border-bottom: 1px solid #000;
}

hr:nth-of-type(even) {
  border-bottom: 1px dashed #000;
}


/* For demo (optional) END */


/* Example 1 */

.ex1Time {
  width: 100px;
  height: 37px;
  text-align: center;
  font: inherit;
  font-size: 37px;
  background: yellow;
}


/* Example 2 */

.ex2Time {
  width: 5ch;
  text-align: center;
  font: inherit;
  font-size: 2.3125rem;
  background: yellow;
  padding-top: 4px;
}


/* Example 3 */

.ex3Time {
  width: 5ch;
  text-align: center;
  font-family: Arial;
  font-size: 2.3125rem;
  background: yellow;
  padding-top: 4px;
}

<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet'>

<main>

  <hr/>
  <header>
    <hgroup>
      <h6>Original Code</h6>
      <h5>Example 1</h5>
    </hgroup>
  </header>
  <hr/>

  <input type="text" class="ex1Time" value="00:00">

  <input type="text" class="ex1Time" value="07:22">

  <input type="text" class="ex1Time" value="11:11">

  <input type="text" class="ex1Time" value="12:34">

  <hr/>
  <header>
    <hgroup>
      <h6 style='display:table-row'>Font dependent lengths are measured in ch units</h6>
      <h6 style='display:table-row;width:400px'>4 inputs Within .ex2Align</h6>
      <h6>&nbsp;</h6>
      <h5>Example 2</h5>
    </hgroup>
  </header>
  <hr/>


  <input type="text" class="ex2Time" value="00:00">

  <input type="text" class="ex2Time" value="07:22">

  <input type="text" class="ex2Time" value="11:11">

  <input type="text" class="ex2Time" value="12:34">


  <hr/>
  <header>
    <hgroup>
      <h6 style='display:table-row'>Using Arial instead of Roboto</h6>
      <h6 style='display:table-row;width:400px'>4 inputs Within .ex3Align</h6>
      <h6>&nbsp;</h6>
      <h5>Example 3</h5>
    </hgroup>
  </header>
  <hr/>


  <input type="text" class="ex3Time" value="00:00">

  <input type="text" class="ex3Time" value="07:22">

  <input type="text" class="ex3Time" value="11:11">

  <input type="text" class="ex3Time" value="12:34">


  <hr/>
</main>

Answer 3

您是否尝试过使用line-height？

.meeting-time {
    margin: 0;
    padding: 0;
    width: 100px;
    height: 37px;
    line-height:37px;
    text-align: center;
    font-family: "roboto",sans-serif;
    font-style: normal;
    font-size: 37px;    
    font-weight: 300;
    background: yellow;
    vertical-align: middle;
    -webkit-appearance: none;
    }

<input type="text" class="meeting-time" style="-webkit-appearance: none; padding: 0px; inn" value="00:00"/>

我为你的CSS添加了行高。试试上面的内容，看看它是怎么回事。

Answer 4

删除你的身高并使用填充代替但使用ems

不同浏览器的HTML输入字段高度不同

现状

一些代码

实际问题

4 个答案: