Question

我正在尝试使用漂亮的大字体创建数字输入，但文字不居中：http://snag.gy/HrICe.jpg

如果我将字体的大小设置为它的一半，它会很好地居中，但它看起来太小，特别是在移动设备上，而且由于其余的布局，我无法使容器变得更大。

以下是我正在做的简化版本：

<!DOCTYPE html>
<html>
   <body>
      <style>
         .heightInput{
         color:#000;
         width:100%;
         height:100%;
         -moz-box-sizing: border-box;
         -webkit-box-sizing: border-box;
         -ms-box-sizing: border-box;
         box-sizing: border-box;
         font-size: 34pt; 
         text-align: center;
         font-family: serif;
         border: 5px solid #000;
         }
      </style>
      <div style="width: 115px; height: 47px;" >
         <input type="number" name="InputA" id="InputA" min="14" max="24" step="1" value="18" class="heightInput">
      </div>
   </body>
</html>

如何让文字保持相同的尺寸，但显示为垂直居中？

Answer 1

你应该尝试给出与你的身高相同的行高：

<!DOCTYPE html>
<html>
   <body>
  <style>
     .heightInput{
     color:#000;
     width:100%;
     height:100%;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -ms-box-sizing: border-box;
     box-sizing: border-box;
     font-size: 34pt; 
     text-align: center;
     font-family: serif;
     border: 5px solid #000;
     line-height: 47px;
     }
  </style>
  <div style="width: 115px; height: 47px;" >
     <input type="number" name="InputA" id="InputA" min="14" max="24" step="1" value="18" class="heightInput">
     </div>
   </body>
</html>

Answer 2

添加与元素高度匹配的行高。确保在没有填充的情况下匹配高度。这是在具有已知高度

的元素中垂直居中单行文本的最佳方法

另外，如果已经定义了高度，请确保您的字体符合高度，输入字段可能就是这种情况

数字输入中的文字不是垂直居中的？

2 个答案: