How do I vertically align placeholder text in textarea? - html

Question

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>

Answer 1

One option is to use 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>
You can also use padding to control the position of the text.
Here's an example using padding-top
.textbox1 {
width: 440px;
padding-top:15px;
}
<textarea class="textbox1"name="mytextarea"placeholder="Name"></textarea>
UPDATE
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>

Answer 2

Instead of using padding-top which will increase the height of the textarea and extra space down use the line-height here is a sample, you can vary the line-height.
textarea::placeholder {
line-height: 90px;
}
you can also use transform property like this:
textarea::placeholder {
transform: translateY(-20px);
}

Answer 3

This works for latest Firefox, IE/Edge, Chrome in pure 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;
}
See this fiddle. The key is to set the height of the textarea to the same line-height as the placeholder.
Sadly vertical-align: middle; seems not to be supported yet.

Answer 4

Your best bet is to use padding, as line height will not work over multiple lines.
Additionally, make sure to take into account the line height / font size when calculating your padding.

Answer 5

I guess this is not exactly what you want, But try to look ..
To center it vertically, I multiplied the height of the element to 7.5% and make it line-height.
.textbox1{
width: 440px;
height:100px;
line-height: calc(100 * 7.5%);
}
.textbox1:focus{
line-height: 14px;
}
Check it here. pure CSS jsFiddle
Note: CSS3 calc() function only works on modern browsers. You can manually change/calculate the line-height if you want it to work on older browsers.
or you really have to use jQuery
I made a help of jQuery here jQuery jsFiddle

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;
}
You can check here CSS jsfiddle

Answer 7

Use the line-height property to make the placeholder vertically centered.

Answer 8

Just as an alternate solution - you could set the rows to an odd number and add half the rows rounded down in line feed characters to put the placeholder in the middle...
.textbox1 {
width: 440px;
}
<textarea class="textbox1"name="mytextarea"placeholder="
Name" rows=3></textarea>

Answer 9

<textarea name="example" onFocus={onFocus} onBlur={outFocus} />
<label className={styles.Teaxarea_label}>Label</label>
and then you have those functions:
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

To improve on the padding answers, here is a way to guarantee calculations that center it. This works better than line-height for multiple lines, but it still means that once the user enters multiple lines of text, there will now be overflow to scroll, rendering the centering essentially useless
.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;
}

Answer 11

You can use absolutely positioned placeholder:
textarea::placeholder {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Check this example