Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vertically align text within input field of fixed-height without display: table or padding?

Tags:

css

xhtml

People also ask

How do you vertically align a text?

1 Select the text you want to center between the top and bottom margins. 2 On the Page Layout tab, click the Page Setup Dialog Box Launcher. 3 Select the Layout tab. 4 In the Vertical alignment box, click Center 5 In the Apply to box, click Selected text, and then click OK.

Which attribute is used for vertical alignment of text in cell of a table?

The HTML <td> valign Attribute is used to specify the vertical alignment of text content in a cell.

How do I center text vertically in line-height?

Use line-height for vertical centering with a fixed height To vertically center a single line of text or an icon within its container, we can use the line-height property. This property controls the height of a line in a run of text and adds an equal amount of space above and below the line-box of inline elements.


I ran into this problem myself. I found that not specifying an input height, but using the font-height and padding combined, results in vertically aligned text.

For instance, lets say you want to have a 42px tall input box, with a font-size of 20px. You could simply find the difference between the input height and the font-size, divide it by two, and set your padding to that amount. In this case, you would have 22px total worth of padding, which is 11px on each side.

<input type="text" style="padding: 11px 0px 11px 0px; font-size: 20px;" />

That would give you a 42px tall input box with perfect vertical alignment.

Hope that helps.


I've not tried this myself, but try setting:

height : 36px; //for other browsers
line-height: 36px; // for IE

Where 36px is the height of your input.


In Opera 9.62, Mozilla 3.0.4, Safari 3.2 (for Windows) it helps, if you put some text or at least a whitespace within the same line as the input field.

<div style="line-height: 60px; height: 60px; border: 1px solid black;">
    <input type="text" value="foo" />&nbsp;
</div>

(imagine an &nbsp after the input-statement)

IE 7 ignores every CSS hack I tried. I would recommend using padding for IE only. Should make it easier for you to position it correctly if it only has to work within one specific browser.


I know I'm late to the party but hopefully this'll help anyone looking for a concise answer that does work across all major browsers (except IE6, we have decided to stop supporting that browser so I refuse to even look at it anymore).

    #search #searchbox {
    height: 21px;
    line-height: 21px;
}

cheers! JP


In my opinion, the answer on this page with the most votes is the best answer, but his math was wrong and I couldn't comment on it.

I needed a text input box to be exactly 40 pixels high including a 1 pixel border all the way around. Of course I wanted the text vertically aligned in the center in all browsers.

1 pixel border top
1 pixel border bottom
8 pixel top padding
8 pixel bottom padding
22 pixel font size

1 + 1 + 8 + 8 + 22 = 40 pixels exactly.

One thing to remember is that you must remove your css height property or those pixels will get added to your total above.

<input type="text" style="padding-top:8px; padding-bottom:8px; margin: 0; border: solid 1px #000000; font-size:22px;" />

This is working in Firefox, Chrome, IE 8, and Safari. I can only assume that if something simple like this is working in IE8, it should work similarly in 6, 7, and 9 but I have not tested it. Please let me know and I'll edit this post accordingly.