Maybe I'm missing something simple, but I can't seem to find a good way to vertically center an inline image with the rest of the line.
Take this code for example:
<p>This is a regular line of text with a textbox: <input type="text" /> and maybe a link with an image in it: <a href="#"><img src="~your image here~" /></a>. And maybe there's a little more text after.</p>
The bottom/baseline of the image lines up with the baseline of the text, as if the image was "sitting" on the same surface as the text itself. I would like the vertical center of the image to match the vertical center of the text (i.e., the middle between the text's baseline and it's "text-top").
It seems like I've seen this solution somewhere before, but I'm coming up short finding it again. Any thoughts?
Yes, I'm well aware of vertical-align, but unfortunately it doesn't actually center it. Sure, it's centered based on the line's x-height, but that's almost always a couple of pixels off. Try it, you'll see what I'm talking about.
Take this code for example:
The bottom/baseline of the image lines up with the baseline of the text, as if the image was "sitting" on the same surface as the text itself. I would like the vertical center of the image to match the vertical center of the text (i.e., the middle between the text's baseline and it's "text-top").
It seems like I've seen this solution somewhere before, but I'm coming up short finding it again. Any thoughts?
Use it like this in your CSS:
Vertical-align: middle; works on inline elements. We had to use a negative margin:top.
use display :table property