Learn HTML step-by-step from A to Z or improve your professional skills.  Home HTML and CSS Tutorials Alignment of Images
Your Ad Here

Alignment of Images


You can align images according to the text around it, using the following alignments:
  • default aligns the image using the default settings of the Web browser. Same as baseline.
  • left aligns the image in the left margin and wraps the text that follows the image.
  • right aligns the image in the right margin and wraps the text that precedes the image.
  • top aligns the top of the image with the surrounding text.
  • texttop aligns the top of the image with the top of the tallest text in the line.
  • middle aligns the middle of the image with the surrounding text.
  • absmiddle aligns the image with the middle of the current line.
  • baseline aligns the image with the baseline of the current line.
  • bottom aligns the bottom of the image with the surrounding text.
  • absbottom aligns the image with the bottom of the current line.
  • center aligns the center of the image with the surrounding text.
In the table below you can see examples of the different vertical alignments you can make for an image.

The note node.gif in the examples is only there to show how the circular sign rainbow.gif is affected by other images on the same line.

This means, that the alignments shown in the example are made to the circular sign and not the note.

HTML EXAMPLE
<img src="/img_articles/6123/rainbow.gif" align="texttop"> bla node.gifbla texttop aligned imagebla bla
<img src="/img_articles/6123/rainbow.gif" align="top"> bla node.gifbla top aligned imagebla bla
<img src="/img_articles/6123/rainbow.gif" align="middle"> bla node.gifbla middle aligned imagebla bla
<img src="/img_articles/6123/rainbow.gif" align="absmiddle"> bla node.gifbla middle aligned imagebla bla
<img src="/img_articles/6123/rainbow.gif" align="bottom"> bla node.gifbla bottom aligned imagebla bla
<img src="/img_articles/6123/rainbow.gif" align="absbottom"> bla node.gifbla absbottom aligned imagebla bla
<img src="/img_articles/6123/rainbow.gif" align="baseline"> bla node.gifbla baseline aligned imagebla bla

I hope this came in useful!

Author's URL: Echoecho
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

HTML is Hyper Text Markup Language that is used to make hypermedia and hypertext documents for the Web. More HTML and CSS: Most Popular Materials | Fresh Materials | More HTML Tutorials at Markuptutorials.com

Add comments to "Alignment of Images"

Only registered users can write comment

No comments yet...