Question

如何在不改变输入高度的情况下垂直对齐输入中的字符/文本（它必须精确到28px）？输入有这个CSS，所以我不明白为什么它有一些padding-top（？）：

input {
    font-family: arial;
    font-size: 28px;
    line-height: 28px;
    height: 28px;
    padding: 0;  
    border: none;
    outline: none;
    background-color:#cdcdcd;
}

<input value="asdg">

某些字母如 g ， p 和 q 会被切断

删除边距底部无济于事。

https://jsfiddle.net/4rtL6415/

Answer 1

没有 padding top ，它与字体大小有关。我已经使用符合整个高度的特殊字符更改了您的代码段输入（我将在下面解释）：

input {
    font-family: arial;
    font-size: 28px;
    line-height: 28px;
    height: 28px;
    padding: 0;  
    border: none;
    outline: none;
    background-color:#cdcdcd;
}

<input value="ￂgs">

此图片：

解释如何构造字体。 99％的时间你会看到Body＆lt; {1}}的字符EM这就是为什么我们认为有一种填充顶部。

有时，您会跨越Body == EM的字符，ￂ的情况（以及很多others）。

您所看到的不是错误而是功能。从这里您有3个选择：

更改字体大小;
更改输入高度;
更改不会“溢出”的字体系列。

选择权归你所有。

Answer 2

问题

在某些字体中，descenders的字符，如 g ， p ， q 和 y ，“溢出”vertical space属性定义的font-size。通常情况下，这不是问题，因为line-height属性提供了足够的额外空间来容纳下行程序。但是，如果将字符放置在具有小于height的固定line-height的容器元素中，则如果容器处理overflow（文本输入为1），则下划线可能会被剪切例如。）

如果您希望将文本向上移动一些以避免裁剪，那么您会失望地知道目前无法在其自己的line-height内重新定位文本。（vertical-align，如果您想知道，将inline element相对于其父级定位。）但是，我们可以使用一些CSS技巧来实现相同的视觉效果......

解决方案1（仅限Webkit）

这个工作原理是给输入一个足够大的高度以适应字体的下肢，然后使用clip-path将其修剪回到28px。这可能是最优雅的解决方案，但不幸的是，clip-path在Webkit浏览器（Chrome，Safari，Opera）之外得不到很好的支持。

input {
  display: inline-block;
  padding: 0;
  border: none;
  height: 32px;
  font-size: 28px;
  line-height: 32px;
  font-family: arial;
  background: #cdcdcd;
  vertical-align: baseline;
  -webkit-clip-path: inset(4px 0px 0px 0px);
  clip-path: inset(4px 0px 0px 0px);
}

input: <input value="asdg">

解决方案2

这个受DebRaj's answer的启发，但是我使用inline-block包装而不是block（不知道你将如何使用它）。与之前的解决方案一样，它会增加输入的高度，但不会使用clip-path将其修剪回来，而是使用带有overflow: hidden;的容器元素。在支持clip-path之前，这可能是最实用的方法。

.text {
  display: inline-block;
  vertical-align: baseline;
  overflow: hidden;
  margin: 7px 0 -7px 0;
  height: 28px;
}
.text > input {
  margin-top: -4px;
  border: none;
  padding: 0;
  background: #cdcdcd;
  font-size: 28px;
  line-height: 32px;
  font-family: arial;
}

input:<span class="text"><input value="asdg"></span>

解决方案3

虽然您无法在自己的line-height内重新定位文字，但这可能是下一个最好的选择。如果将line-height设置为小于font-size的值，则文本确实会相对于其正常基线向上移动。这意味着您可以在不更改容器高度的情况下将剪裁的部件放入视图中。不幸的是，如果您尝试使用文本输入，您会发现一个奇怪的怪癖：line-height如果小于输入的height则完全被忽略。因此，我们必须替换不同的元素，并以某种方式将其转换为可编辑的文本框。这可以使用contenteditable属性来完成。

.fauxTextInput {
  display: inline-block;
  vertical-align: baseline;
  margin: 6px 0 -6px 0;
  padding: 0 3px 0 3px;
  width: 9em;
  height: 28px;
  overflow: hidden;
  font-size: 28px;
  line-height: 23px;
  font-family: arial;
  background: #cdcdcd;
}

Faux input: <span class="fauxTextInput" contenteditable>asdg</span>

Answer 3

正如@Thomas所提到的，根据字体构造规则，存在默认间距。如果我们集中你想要实现的输出是在输入区域使字体完全相同的高度，你可以将input包裹到div并给它一个高度来调整输入到它中使用掩模。

以下是代码：

<div class="input-wrapper">
  <input value="asdg">
</div>

CSS：

.input-wrapper{
  position: relative;
  font-family: arial;
  width: 100%;
  height: 90%;
  padding: 0;
  background-color: #fff;
  overflow: hidden;
}
.input-wrapper input {
    display: block;
    width: 100%;
    height: 124%;
    margin-top: -0.19em;
    margin-bottom: 0em;
    font-size: 28px;
    padding: 0;
    outline-offset: 0;
    border: none;
}
.input-wrapper input:focus{
   outline-offset: 0;
   outline: 0;
   border: none;
   box-shadow: none;
}

小提琴：https://jsfiddle.net/x8jmLp8m/12/

希望有所帮助。

Answer 4

虽然有很多答案。我以为我会把我的解决方案添加到一堆。

在this Fiddle中，您可以看到我如何创建带有span标记的输入字段以及contenteditable属性。采用这种方法的优点是输入字段可以拉伸和包裹，并且我们可以使其精确到28px。

在CSS中，我添加了以下重要规则：

span{
  display: inline-block;
  font-size: 25px; /*higher than 25px simply doesn't fit a 28px container*/
  line-height: 1;
  padding: calc(-.5em + 14px) 0;
}

display，当然，要设计一堆
font-size声明字体的高度

line-height 1 以确保文本默认实际占用25px。
padding calc(-.5em + 14px) 0。这是棘手的部分

由于这种填充，元素将保持28px高，同时仍然使文本居中。请参阅下表以了解计算的工作原理。 font-size和output * 2总是加起来至少为28。

font-size | calculation | output | -------------------------------------- 50px | calc( -25px + 14px) | -11px | a negative padding translates to a padding of 0 25px | calc(-12.5px + 14px) | 1.5px | 20px | calc( -10px + 14px) | 4px | 15px | calc( -7.5px + 14px) | 6.5px | 10px | calc( -5px + 14px) | 9px |

使用此代码，您可以通过修改14px中的calc部分来编辑范围的高度，并编辑字体大小而无需重新计算自己

希望这有帮助

Answer 5

编辑你的小提琴 here

问题是你的字体大于包围它的元素的高度。因此，您只需将height和line-height设置为比您正在使用的字体大小大几倍。

希望这有帮助。

Answer 6

只需缩小字体大小：

input {
    font-family: arial;
    font-size: 20px;
    line-height: 28px;
    height: 28px;
    padding: 0;  
    border: none;
    outline: none;
    background-color:#cdcdcd;
}

<input value="asdg">

Answer 7

我希望这能帮助你了解你想要达到的目标

在CSS中，行高属性设置的高度一整行文字，所以字体之间的差异 - 大小和行高是相当于领先（如如上图所示。）

我们的CSS就是这个

input {
font-family: arial;
font-size: 28px;
line-height: 28px;
height: 28px;
padding: 0;  
border: none;
outline: none;
background-color:#cdcdcd;

}

这里我们设置了行高和字体大小相等，因为decent正在被剪切。所以你需要减少字体大小或增加行高。

Answer 8

public class NonScrollableTextView extends TextView {
    public NonScrollableTextView(Context context) {
        super(context);
    }

    public NonScrollableTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public NonScrollableTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public void scrollTo(int x, int y) {
        //nop
    }
}

Answer 9

只需将高度和行高更改为40px或更高。 https://jsfiddle.net/525raf3L/

input {
    font-family: arial;
    font-size: 28px;
    line-height: 40px;
    height: 40px;
    padding: 0 12px;  
    border: none;
    outline: none;
    background: yellow;
}

<input value="asdg">

垂直对齐输入

9 个答案:

问题

解决方案1（仅限Webkit）

解决方案2

解决方案3