Vertical align img and text inside

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

vertical-align: middle doesn’t work on elements with display: block. Make them display: inline if possible, or display: table-cell if not.

Also, http://mathiasbynens.be/demo/center-vertically-inside-float might help.

Answer 2

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.

Answer 3

display:table-cell;
vertical-align:middle;

Answer 4

Here's a quick example:

Demo

You can easily mod the values to your needs.

I just added a wrapper div around the image and the span called wrap

Then added this in the CSS:

.wrap{ 
    position:absolute; 
    top:50%; 
    height:240px; /* Make this whatever you want your height with */
    margin-top:-120px; /* Negative half of the height */
}