如何在文本框中垂直对齐占位符文本？

Question

我想要垂直对齐textarea（文本框）中的占位符文本。我使用textarea而不是文本输入，因为我需要使用多行。

.textbox1 { 
  width: 440px;
}

<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>

- user3619057

---

也许这个可以帮到你：https://codepen.io/desandro/pen/gICqd - Faisal Ashfaq

只是为了澄清，当你说"垂直对齐"时 - 你是指在中间，顶部还是底部？我假设你指的是中间。 - MrRobboto

另外，你认为需要多少行？你只有两行原始文本。如果你可以将行数设置为3，你就可以轻松地使用换行符对齐文本，我刚刚发布了一个解释的答案... - MrRobboto

其他答案的问题在我看来是，当您开始输入文本时，文本仍然居中对齐。也许这就是 OP 的意思，但我认为这只是占位符文本，而不是输入的文本。需要更多的澄清... - MrRobboto

Answer 1

不要使用padding-top来增加文本域的高度和额外的下边距，而是使用line-height。这里有一个示例，您可以变化行高。

textarea::placeholder {
line-height: 90px;

你还可以像这样使用transform属性：

}

   textarea::placeholder {
transform: translateY(-20px);

}

- Sunday Etom

---

转换看起来很酷，但在火狐浏览器中似乎没能正常工作。 - Mark Rogers

现在它也可以在Firefox中工作了。谢谢。 - Or Nakash

Answer 2

一种选择是使用 line-height：

.textbox1 { 
    width: 440px;
    height:30px;
    line-height:30px;
}

.textbox1 { 
    width: 440px;
    height:30px;
    line-height:30px;
}

<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>

你也可以使用 padding 控制文本的位置。

这里是一个使用 padding-top 的例子。

.textbox1 { 
    width: 440px;
    padding-top:15px;
}

<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>

更新

由于要求包括多行支持，建议设置顶部和底部填充，即:

padding-top 和 padding-bottom

.textbox1 { 
    width: 440px;
    height:6px;
    padding: 30px 5px;
}

.textbox1 { 
    width: 440px;
    height:60px;
    padding: 30px 5px;
}

<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>

- dev7

---

@AbrarJahin 我已经做好了，并放了一个链接让你试试。 - dev7

我省略了大部分代码，使其更简洁，但这样做只会增加文本框的大小，就像这样 - https://jsfiddle.net/hb4wqsep/ - user3619057

考虑一个高度为600像素的文本框的例子，你的解决方案是这个链接吗？对我来说有点丑，如果用户想输入一些文本... - Christian Gollhardt

好的，这与我的代码中缺少的高度属性有关。非常感谢！ - user3619057

@ChristianGollhardt 你说得对，我没有考虑到多行的情况。 - dev7

Answer 3

这适用于最新的Firefox、IE/Edge和Chrome，仅使用CSS实现：

textarea { 
    width: 440px;
    height:600px; /* Note this is the same height as the placeholders line-height */
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    line-height:600px;
}
::-webkit-input-placeholder { /* Webkit */
    line-height:600px;
}
:-ms-input-placeholder { /* IE */
    line-height:600px;
}

查看此示例。关键是将的<code>height</code>设置为与占位符相同的<code>line-height</code>。</p> <p>不幸的是，<code>vertical-align: middle;</code>似乎尚未得到支持。</p>

- Christian Gollhardt

Answer 4

你最好使用 padding，因为在多行情况下，line height 不起作用。

另外，在计算填充时，请考虑行高/字体大小。

- typo

---

padding和行高看起来都不太合适。 - Manohar Reddy Poreddy

Answer 5

我猜这可能不是你想要的，但试着看一下...

为了垂直居中，我将元素的高度乘以7.5％并使其成为行高。

.textbox1{
width: 440px;
height:100px;
line-height: calc(100 * 7.5%);
}
.textbox1:focus{
  line-height: 14px;
}

在这里查看。pure CSS jsFiddle

注意：CSS3的calc()函数仅适用于现代浏览器。如果您想在旧版浏览器上使用，可以手动更改/计算行高。

或者您确实需要使用jQuery

我在这里制作了一个jQuery帮助 jQuery jsFiddle

- rmondesilva

Answer 6

.textbox1 { 
    width: 440px;
    height:70px
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   line-height:70px;
   text-align: center; 
}

:-moz-placeholder { /* Firefox 18- */
   line-height:70px;
   text-align: center; 
}

::-moz-placeholder { /* Firefox 19+ */
   line-height:70px;
   text-align: center; 
}

:-ms-input-placeholder { /* IE 10+ */
   line-height:70px;
   text-align: center; 
}

您可以在此处查看CSS jsfiddle。

- Igweze Ebele Mark

Answer 7

作为另一种解决方案 - 您可以将行数设置为奇数，并在换行符中添加向下舍入的一半行数，以将占位符放置在中间...

.textbox1 { 
  width: 440px;
}

<textarea class="textbox1"name="mytextarea"placeholder="&#10;Name" rows=3></textarea>

- MrRobboto

Answer 8

<textarea name="example" onFocus={onFocus} onBlur={outFocus} />
<label className={styles.Teaxarea_label}>Label</label>

然后你有那些函数：

const outFocus = (event) => {
    if (event.target.value !== '') {
      event.target.nextSibling.style = "display:none;"
    }
    else {
      event.target.nextSibling.style = "display:block;"
    }
  }
  const onFocus = (event) => {
    event.target.nextSibling.style = "display:none;"
  }

CSS：

.Teaxarea_label{
  position: absolute;
  user-select: none;
  pointer-events: none;
  display: block;
}

textarea {
  position: relative;
}

- Rumyana Gareva

Answer 9

为了改善填充答案，这里提供一种保证居中计算的方法。对于多行文本，它比 line-height 更有效，但这仍意味着一旦用户输入多行文本，就会出现溢出滚动，从而使居中无效。

.textbox1 {
  --title-modal--textarea--height: 100px;
  /* font-size variable for calculations cannot be em, otherwise calculations become doubly-dependent on font-size */
  --title-modal--textarea--font-size: 1rem;
  --title-modal--textarea--line-height: 1.5;

  height: var(--title-modal--textarea--height) !important;
  font-size: var(--title-modal--textarea--font-size);
  line-height: var(--title-modal--textarea--line-height);

  padding-top: calc((var(--title-modal--textarea--height) - (var(--title-modal--textarea--line-height) * var(--title-modal--textarea--font-size)))/2);

  /* I used these to make sure the border doesn't take away from the height, */
  /* affecting the padding calculation, */
  /* but you could similarly turn them into variables and subtract */
  border-bottom: 0;
  border-top: 0;
}

- John Mangel

Answer 10

使用line-height属性使占位符垂直居中。

- SHUBHAM SINGH

---

当回答一个已有答案的旧问题时，解释你的答案与现有答案不同是很有帮助的。格式也很重要，因为这个答案被格式化为全部代码。 - Jason Aller