Question

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

.textbox1 { 
  width: 440px;
}

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

Answer 1

一种选择是使用line-height：

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

＆＃13;

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

＆＃13;

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

＆＃13;

您还可以使用padding来控制文字的位置。

以下是使用padding-top

的示例

＆＃13;

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

＆＃13;

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

＆＃13;

<强>更新

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这适用于最新的Firefox，IE / Edge，纯CSS中的Chrome：

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;
}

见fiddle。关键是将textarea的height设置为与占位符相同的line-height。

可悲的是vertical-align: middle;似乎还没有得到支持。

Answer 3

最好的办法是使用padding，因为line height不会在多行上使用。

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

Answer 4

我想这不是你想要的，但试着看......

为了使其垂直居中，我将元素的高度乘以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

Answer 5

.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

Answer 6

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

Answer 7

使用 line-height （而不是使用 padding-top 来增加文本区域的高度和减少额外的空间）这里是一个示例，您可以更改行-高度。

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

}

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

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

}

Answer 8

作为一种替代解决方案-您可以将行设置为奇数，并在换行符中四舍五入的行的一半将占位符放在中间...

.textbox1 { 
  width: 440px;
}

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

Answer 9

<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;
}

Answer 10

为了改进填充答案，这里有一种方法可以保证以它为中心的计算。对于多行，这比 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;
}

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

10 个答案: