如何在textarea中垂直对齐占位符文本? [英] How do I vertically align placeholder text in textarea?

问题描述

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

I am trying to vertically align the placeholder text in textarea (textbox). I am using textarea instead of text input because I need to use multiple lines.

.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控制文本的位置.

You can also use padding to control the position of the text.

这是使用padding-top

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

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

更新

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

Since the requirements include multi-line support, I'd recommend setting the top and bottom padding i.e:

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

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

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

这篇关于如何在textarea中垂直对齐占位符文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！