Index

vertical-align:middle 4 (calculation of the padding).

This is a tricky way but works in the same way in the FF2-3 and IE6-7.
It totally depends from font-size of the form elements, that must be represented with pixels.
The font-size of the form elements is inherited from the UA setting and must be set implicitly. What does it mean?
The default UA setting for font-size is 16px, but for the form elements this 16px is the line-height and the font-size is 83.35% (13.3333px) of this value.
If you instantiated the font-size for the body: 75% of the UA setting (12px if default is 16px), the font size of the form elements is still 13.3333px. But if you set the UA font-size for example: 18px; the font size of the form elements will be 15.33px, and the line-height will be 18px.


Now we need to know the height value of the form elements for the particular font-size. This value is the value of the line-height, plus the top/bottom borders width:
Font size (px)Value of the 'height' (px)
819
920
1021
1122
1223
1324
1425
1526
1628
<div class="line">
	<img src="images/print.png" />
	<input type="button" value="Input Button" />
	<span class="spn">Span</span>
	<select><option>Select</option><option>second</option></select>
	<button>Button</button>
	<input type="submit" value="Input Submit" />
	<img src="images/print.png" style="height:20px;" />
	<input type="text" value="Input Text" />
</div>
<style>
	.line{background:beige;}
	.line input, .line select, .line button {font:size:13px;}
	.line input,.line select,.line button,.line img,.line span{vertical-align:middle;}
</style>
Span

Now I want that my <div class="line"> has for example the height: 40px.
The font-size of the form elements is: 13px, their height is: 24px. To make the height of the 'div class="line"' 40px I calculate: (40px - 24px) / 2 = 8px.
This 8px value I need to use for the padding-top and the padding-bottom of the <div class="line">.

<style>
	.line{background:beige;padding:8px 1em;}
	.line input, .line select, .line button {font:size:13px;}
	.line input,.line select,.line button,.line img,.line span{vertical-align:middle;}
</style>
Span

See the screen shot with the Firebug and the Developer Tool calculated value of the '.line height'.