Vertical align img and text inside <p>

Question

I can't get the img and text in the span to be vertically aligned:

  <p class="login-button">
                    <input type="submit" id="login-submit" value="Log On" /><img style="padding-left:20px;" id="loadingDiv" src="/Content/ib/images/ajax-loader.gif" />
                    <span id="error" style="color:red; padding-left:13px;">text </span>

                </p>

Any ideas? I tried:

.login-button{ vertical-align:middle; height:30px; line-height:30px;}
.login-button img{ vertical-align:middle;}

Answer 1

I set up a demo for your at: http://jsfiddle.net/audetwebdesign/dCAkx/

I simplified your CSS a tiny bit and added some background color and padding.

You need to apply the vertical-align property to all the inline elements that you want to align.

The vertical-align property is not inherited, so you need to apply it to all the relevant elements.

You can apply padding and margins to control the spacing between the text and the image.

You can experiment a bit by adjusting the line-height of the container p and also, try out other alignment values such as top, bottom, baseline.

This trick is worth mastering because it touches on a key concept of how the CSS box model works, and this pattern is very common, so a good trick to have in your CSS toolbox.