CODEWITHSUNDEEP
htmlcsstextarea
Prerona Kundu
Prerona Kundu

Reputation: 113

Why isn't my textarea value centered when scrollbars are removed?

I'm trying to create a textarea that has no scroll bar and has the text centered.

I've fixed the scroll bar issue by setting the overflow style to auto or hidden. However, this causes the text to stop being centered.

The following shows my style attributes for all textareas:

textarea
{
    overflow:auto;
    width: 200px;
    height: 60px; 
    text-align:center;
    vertical-align:middle;   
}

The following shows my code for one of my textareas:

<textarea ID="textarea1" style="position:absolute; left:600px;">
     Bridge Crane
</textarea>

This is what the textareas look like right now: enter image description here

Upvotes: 1

Views: 216

Answers (2)

weegee
weegee

Reputation: 3399

Looks like you want vertical-align: middle; because you have it inside CSS but the bad news is that we cannot do it with just <textarea></textarea>. We have to use a div-content-editable.

div {
    overflow: auto;
    width: 200px;
    height: 60px;
    border:1px solid black; /* a border just for styling */
    text-align:center; /* text is center horizontally */
    display: table-cell; /* yes, so we can use vertical-align: middle */
    vertical-align: middle; 
}
<div contenteditable="true">
    Row Row Row your boat
</div>

Upvotes: 0

isherwood
isherwood

Reputation: 61056

It appears not centered because you have a bunch of whitespace inside the opening and closing tags. The content actually is centered when you consider the entire value. Just remove the whitespace.

textarea {
    overflow: auto;
    width: 200px;
    height: 60px;
    text-align: center;
    vertical-align: middle;
}
<textarea ID="textarea1">Bridge Crane</textarea>

Upvotes: 1

Related Questions