Just don't set the height of the input box, only set the font-size, that will be ok
After much searching and frustration a combo of setting height, line height and no padding worked for me when using a fixed height (24px) background image for a text input field.
.form-text {
color: white;
outline: none;
background-image: url(input_text.png);
border-width: 0px;
padding: 0px 10px 0px 10px;
margin: 0px;
width: 274px;
height: 24px;
line-height: 24px;
vertical-align: middle;
}
If your element is a block element contained/or with display like so:
display: table-cel
Or, with an fixed line-height, you can set the vertical align like so:
Vertical-Align: Middle;
It won't work for other cases, but it works fine on these conditions.
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.
Go for line-height.
The vertical-align tag works fine for the submit button but not for the text in the input field.
Setting line-height to the height of the input field works on all browsers. Incl IE7.
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.
The inner vertical alignment will depend on font height and input height, so, it can be adjusted using padding !!!
Try some like :
.InVertAlign {
height: 40px;
line-height: 40px;
font-size: 2em;
padding: 0px 14px 3px 5px;
}
...
<input type="text" class="InVertAlign" />
Remember to adjust the values on css class according to your needs !
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.
input[type=text]
{
height: 15px;
line-height: 15px;
}
this is correct way to set vertical-middle position.
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
You should remove your title text and use the input placeholder for your label's title. Some visual and CSS work after that and your form will be looking tight and user friendly. I'm aware of the disadvantages but this will completely relieve the alignment wrestling.
If your element is a block element contained/or with display like so:
display: table-cel
Or, with an fixed line-height, you can set the vertical align like so:
Vertical-Align: Middle;
It won't work for other cases, but it works fine on these conditions.
After much searching and frustration a combo of setting height, line height and no padding worked for me when using a fixed height (24px) background image for a text input field.
.form-text {
color: white;
outline: none;
background-image: url(input_text.png);
border-width: 0px;
padding: 0px 10px 0px 10px;
margin: 0px;
width: 274px;
height: 24px;
line-height: 24px;
vertical-align: middle;
}
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.
Go for line-height.
The vertical-align tag works fine for the submit button but not for the text in the input field.
Setting line-height to the height of the input field works on all browsers. Incl IE7.
Try :
height: 21px;
line-height: 21px; /* FOR IE */
Because on some versions of IE (< 9) the property height is not properly interpreted.
I was just working on this within MaterialUI's text inputs. Adding padding-top: 0.5rem to the input style worked for me. While this was adjusting the padding, at least you don't need to worry about adjusting for updates, much less different breakpoints.
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.
This is how I do it.
<ul>
<li>First group of text here.</li>
<li><input type="" value="" /></li>
</ul>
then inside your CSS file,
ul li {
display: block;
float: left;
}
That should work for you.
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
input[type=text]
{
height: 15px;
line-height: 15px;
}
this is correct way to set vertical-middle position.
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.
Just don't set the height of the input box, only set the font-size, that will be ok
This is how I do it.
<ul>
<li>First group of text here.</li>
<li><input type="" value="" /></li>
</ul>
then inside your CSS file,
ul li {
display: block;
float: left;
}
That should work for you.
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.
Late to the party, but the current answers won't work if you have box-sizing: border-box set (which a lot of people do for form elements these days).
Just reset the box sizing for IE8 to box-sizing: content-box; then use one of the padding / height answer.
You should remove your title text and use the input placeholder for your label's title. Some visual and CSS work after that and your form will be looking tight and user friendly. I'm aware of the disadvantages but this will completely relieve the alignment wrestling.
Try :
height: 21px;
line-height: 21px; /* FOR IE */
Because on some versions of IE (< 9) the property height is not properly interpreted.
I was just working on this within MaterialUI's text inputs. Adding padding-top: 0.5rem to the input style worked for me. While this was adjusting the padding, at least you don't need to worry about adjusting for updates, much less different breakpoints.
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.
Source: Stackoverflow.com