如何垂直对齐文本区域中的占位符文本?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (18)

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

.textbox1 { 
  width: 440px;
}

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

提问于
用户回答回答于

一种选择是使用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>

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

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

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

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

用户回答回答于

这适用于纯CSS中的最新Firefox,IE / Edge,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;
}

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

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

扫码关注云+社区