CSS has a vertical-align: middle property for inline elements, which vertically aligns the middle of the element to half of the x-height of the parent element’s font. However, this often puts images a little lower than I want them. Is there a way to vertically align the middle of an arbitrary image to the full x-height of the parent element’s font?

For instance, setting vertical-align: calc(1ex - 50%) on the image doesn’t work because it takes 50% of the parent element’s height rather than 50% of the image’s height.