MoonPoint Support Logo

 


Shop Amazon Warehouse Deals - Deep Discounts on Open-box and Used ProductsAmazon Warehouse Deals



Advanced Search
April
Sun Mon Tue Wed Thu Fri Sat
           
22
           
2017
Months
Apr


Sat, Apr 22, 2017 11:20 pm

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:

24V <img src="direct-current.gif" width="49" height="49" style="border: none; vertical-align: middle;" alt="Direct current symbol">1500mA

I would then see the following:

24V Direct current 
symbol1500mA

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 Direct current 
symbol1500mA

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

24V Direct current 
symbol1500mA

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 Direct current symbol1500mA

Though, in this case I could also have used the HTML code &#9107;, 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

Once You Know, You Newegg AliExpress by Alibaba.com

Shop Amazon Local - Subscribe to Deals in Your Neighborhood

Valid HTML 4.01 Transitional

Privacy Policy   Contact

Blosxom logo