HTML Tutorial – 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 in the examples is only there to show how the circular sign 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=”rainbow.gif” align=”texttop”>	bla bla bla bla
<img src=”rainbow.gif” align=”top”>	bla bla bla bla
<img src=”rainbow.gif” align=”middle”>	bla bla bla bla
<img src=”rainbow.gif” align=”absmiddle”>	bla bla bla bla
<img src=”rainbow.gif” align=”bottom”>	bla bla bla bla
<img src=”rainbow.gif” align=”absbottom”>	bla bla bla bla
<img src=”rainbow.gif” align=”baseline”>	bla bla bla bla

Source: echoecho.com

you may also like:

• HTML Tutorial – CSS3 Spinning Social Media Icons
  The HTML First we start off with our social media icons. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 <div class="spinning_icons">     <a href="http://www.twitter.com/...
• HTML Tutorial – How to Create Cool Table Design in CSS3
  Today I will show you how to create cool table design using CSS3; you can use these tables for data handling and data presentation. Using the same old table code and a little of CSS3 to spice things u...
• HTML Tutorial – Quick tip coding beautiful form
  What will be needed in this tutorial? PSD file from preview tutorial Museo Slab font Step 1. Folder and files structure First create Your folder structure. We will need index.html, style.css...
• HTML Tutorial – In-line text editing and storing to database
  So, lets start with HTML code: 1 2 3 4 5 6 7 <div id="status"></div>     <div id="content">         <div id="editable" contentEditable="true">       ...
• HTML Tutorial – Build a Neat HTML5 Powered Contact Form
  Tutorial Details Requirements: PHP 4.3+ Technologies Used: HTML5, Javascript, jQuery, AJAX & PHP Difficulty: Beginner - Intermediate Estimated Completion Time: 60 Minutes Step 1: Ge...

No Responses to “HTML Tutorial – Alignment of Images”

1. [HTML Tutorial] Html Forms - Check box | Beyond Venture Design says:

   August 14, 2009 at 23:11

   [...] The align setting defines how the field is aligned. Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM. The alignments are explained in the image section. You can learn about the different alignments here. [...]