Vertically aligning an image with text using CSS

If you wish to vertically align an image with text in Hypertext Markup Language (HTML) code that is compliant with Cascading Style Sheets (CSS) you can do so using <style="vertical-align: position;"> where position is bottom, middle, or top. E.g., if I want to align an image of the direct current symbol, which is a horizontal line over top of three shorter horizontal lines, so that the image is vertically in the middle of the text, I could use the code below:

I would then see the following:

24V 1500mA

If I used vertical-align: top, instead, the image would appear as shown below where the text is aligned with the top of the image:

24V 1500mA

If I used vertical-align: bottom, instead, the image would appear as shown below:

24V 1500mA

If I did not specify a vertical alignment, the image would appear as it did when I specified "bottom" for the vertical alignment as shown below:

24V 1500mA

Though, in this case I could also have used the HTML code ⎓, instead, for the direct current symbol and avoided the use of an image and the need to align the image with the text, though I didn't realize that when I started using the image on a page for power adapter for various devices.

E.g.: 24V ⎓ 1500mA

[/network/web/html/css] permanent link