Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

html / css how to Middle (vertically) align text inside a <textarea>

Tags:

html

css

I want to centre the text inside a text area; I am trying with the line height, but it doesn't work.

screenshot

like image 472
m.Elouafi Avatar asked Jun 05 '12 08:06

m.Elouafi


People also ask

How do I center text vertically in textarea?

How do I align text in the middle of textarea? The answer was adding HTML5's contenteditable="true" on a table cell with style="vertical-align: middle".

How do you center a placeholder text vertically in textarea?

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

How do I center text vertically in HTML?

For vertical alignment, set the parent element's width / height to 100% and add display: table . Then for the child element, change the display to table-cell and add vertical-align: middle . For horizontal centering, you could either add text-align: center to center the text and any other inline children elements.

How do you center content vertically?

To center a div vertically on a page, you can use the CSS position property, top property, and transform property. Start by setting the position of the div to absolute so that it's taken out of the normal document flow. Then set the top property to 50%.


3 Answers

You could use the contenteditable="true" attribute on a <div> and then skin it with CSS.

Here is a link for cross browser compatibility: Reliable cross-browser info on ContentEditable

like image 111
Boris Delormas Avatar answered Oct 12 '22 23:10

Boris Delormas


You can use padding only to achieve that, but it's not pretty way to do things. You can also use jQuery to make the padding flexible, instead of just setting it by yourself.

like image 34
Malyo Avatar answered Oct 12 '22 23:10

Malyo


Hey now you can used input tag

Replace textarea into input tag as like this

and define height and line-height

Css

input[type="text"]{
line-height:125px;
    height:125px;
}

HTML

<input type="text" value="">

Live demo http://jsfiddle.net/MTCrt/

like image 38
Rohit Azad Malik Avatar answered Oct 12 '22 23:10

Rohit Azad Malik