When vertical-align is applied to inline elements, however, it's a whole new ballgame. In this situation, it behaves like the (old, deprecated) align attribute did on <img> elements. In a modern, standards-compliant browser, the following three code snippets do the same thing:
Comments
If it's in an image tag,
If it's in an image tag, this works as well:
position: absolute;bottom: 0;
Vertical align only works within element it's contained, not to the page.
If the image is in the background, you can use this:
body {
background: url('imagename.gif') no-repeat bottom left;
}
When vertical-align is
When vertical-align is applied to inline elements, however, it's a whole new ballgame. In this situation, it behaves like the (old, deprecated) align attribute did on <img> elements. In a modern, standards-compliant browser, the following three code snippets do the same thing:
<img align="middle" ...>
<img style="vertical-align:middle" ...>
<span style="display:inline-block; vertical-align:middle"> foo<br>bar </span>
-----------------
software reviews