Vertical Alignment of Inline Elements

Demonstration of vertical-align to align an image with an input button and error message.

by audetwebdesign

HTML

<p class="login-button">
<input class="loginSubmit" type="submit" value="Log On" />
<img class="loadingImg" src="http://i51.tinypic.com/35071jp.gif" height="40" width="40" />
<span class="error">text</span>
</p>

CSS

.login-button {
    background-color: lightgray;
    padding: 5px;
}
.loadingImg {
    padding: 0 20px;
    margin: 0 20px;
    background-color: white;
    vertical-align: middle;
}
.loginSubmit {
    vertical-align: middle;
}
.error {
    color: red;
    font-weight: bold;
    vertical-align: middle;
}