Vertical align img and text inside <p>

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;}

Answers


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.


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

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 */
}

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.


Need Your Help

yii2 composer update fatal error

solr yii2 composer-php

When I update my composer to add yii2-solr extension to my project, I encounter with an error like below:

sort mongodb documents by timestamp (in desc order)

python mongodb timestamp

I have a bunch of documents in mongodb and all have a timestamp field with timestamp stored as "1404008160". I want to sort all docs in this collection by desc order. I do it by: