Question

我创建了一个200x50px的输入文本字段。在该输入字段中键入的文本会自动出现在该输入字段的垂直中心。如何在文本字段中移动它？我试图做诸如padding-top：20px之类的东西来将其向下移动，但这也使输入字段更高。当我减小高度时，它会切掉底部的文字。

您可以在以下位置查看示例：demo

我刚刚添加了1个输入字段：

<input placeholder="fill it in"></input>

然后在其上使用此CSS：

input {
  width:200px;
  height:50px;
  font-size: 20px;
  text-align: center;
  background-color: yellow;
}

现在它的高度为200x50像素，但是我想不出一种方法，可以在不使输入文本区域变大或变小的情况下上下移动填充的文本。

Answer 1

您可以在以下代码笔中看到我的问题：demo

占位符文本和输入文本具有不同的字体大小。在Chrome中，占位符文本与输入文本的顶部对齐，而在Safari中，占位符文本与输入文本的底部对齐。

input {
  width:200px;
  height:50px;
  font-size: 28px;
  text-align: center;
  background-color: yellow;
}

::placeholder {
    /* Chrome, Firefox, Opera, Safari 10.1+ */
    font-size: 12px;
    text-transform: none;
}

我想更好地控制占位符和输入文本如何垂直放置，以便在所有浏览器中以相同的方式放置它们。在固定尺寸输入文本字段的垂直中心，顶部或底部。

Answer 2

之所以想要这样做，是因为我希望能够垂直放置占位符文本和该200x50文本字段中的填充文本。因此，该文本将位于该200x50输入字段的顶部，中间或底部。现在各种各样的事情发生了。例如，当我使用24px输入文本和14px占位符文本时。我希望垂直居中，但现在14px占位符文本将在24px高输入文本的底部对齐。在Chrome中就是这样。在Safari中，高14px的占位符文本将出现在该24px填充文本的顶部。我希望能够像在所有浏览器中一样定位两个文本。所有这些都不会使200x50输入字段的高度变高或变小

如何在输入文本字段内移动文本？

2 个答案: