CODEWITHSUNDEEP
htmlcsstextarea
Prasanth K C
Prasanth K C

Reputation: 7332

How to begin typing from vertical middle of textarea

I have a textarea, like this

<textarea rows="10" cols="50"></textarea>

In default the cursor will start from the top left of the textarea, But i want it to be started from vertical and horizontal center of textarea like text aligned to middle in a table-cell.

I have achieved horizontal center by applying text-align:center, But how to make it vertically center?

Something like this:

enter image description here

It should be like this if more text is entered.

enter image description here

I tried this CSS:

textarea {
    vertical-align:middle;
    text-align:center;
    display:table-cell;
}

Upvotes: 4

Views: 3326

Answers (3)

andyb
andyb

Reputation: 43823

I cannot think of a way to do this with just <textarea> but I have a demo that almost works using a contenteditable <div>. From that article:

Browser support for contenteditable is surprisingly good

The only problem I see is when the text fills the vertical space the <div> expands. I cannot think of any way to stop this in CSS (and I tried many different properties!). It should be possible to intercept this in JavaScript and stop the <div> expanding.

HTML

<div contenteditable="true"></div>

CSS

div {
    height:150px;
    width:350px;
    border:1px solid black;
    vertical-align:middle;
    text-align:center;
    display:table-cell;
}

Upvotes: 2

epoch
epoch

Reputation: 16605

Ok, I fiddled around a bit, and came up with a solution immitating what you need, it is a div with a textarea inside:

HTML

<div id="expandedText">
    <textarea></textarea>
</div>

CSS

div#expandedText {
    width: 250px;
    height: 50px;

    background-color: #fff;
    padding: 50px 10px 40px 10px;
    border: 1px solid #aaa;

    margin: 10px auto;
    text-align: center;
}

div#expandedText > textarea {
    width: 250px;
    height: 50px;

    overflow: hidden;
    text-align: center;
    resize: none;

    outline: 0;
    border: 0;
}

Upvotes: -1

Anil Meena
Anil Meena

Reputation: 993

you have to following code for css.

<style>
textarea {
    text-align:center;
    padding:50px 0;
    -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
     -o-box-sizing: border-box;
        box-sizing: border-box;
    display:inline-block;
}
</style>

Upvotes: 0

Related Questions