How to Align Text & Images in HTML

HTML is the easiest of all the programming languages.

Anyone can master basic HTML programming. If you are blogging or writing online using a dashboard that doesn't have a visual or Rich Text Editor, you will need to take the time to learn basic HTML commands. Aligning text and images is fairly simple. Learn the rules and copy/paste the code needed into an RTF file on your desktop for quick use.

Things You'll Need

• HTML code

Instructions

Aligning text in HTML

1. The code to align text in HTML for a post or single page is <P ALIGN=direction>. When placing this code onto the page, you simply put where you'd like the text to be justified into where it says "direction" in the example code above.

2. If you are editing in CSS and making a static change to the alignment of the text on a webpage, the code you need to use is this:

   <STYLE TYPE="text/css">

   <!--

   .direction {text-align:direction}

   -->

   </STYLE>

   Again, you will need to replace the word "direction" with where you want the text aligned. Left, right and center are your options.

3. Copy these codes into an RTF file on your computer's desktop for easy reference.

Aligning images in HTML

1. Aligning pictures is a little different from aligning text. You need to have the image file hosted online somewhere or have an uploader client on your webpage to be able to post photos online. Once you have a URL for the jpeg, giff or png file for the photo, you can align it fairly simply by using this tag:

   <IMG SRC="URLof Photo" ALT="Description of Photo" ALIGN=DIRECTION>

   Replace the information in the quotation marks with the URL for the photo, a description of the photo (different than a caption) and the direction you'd like the text aligned around the photo. Your options for alignment are left, right, center, top and bottom.

2. Aligning images in CSS is similar, but the code is slightly different:

   <img src="TheImageLocation.jpg" alt="My Image Description" class="align-direction" />

3. Copy these codes to an RTF file on your desktop for easy reference.

Tips & Warnings

• You also can consider creating a border around photos by using "float" values.

• Experiment with HTML and preview as you work on your website to see what works for your own aesthetic and what doesn't.

References

• Dev Lounge: Aligning Images The Right Way in CSS
• W3Schools: Img Tag

Resources

• HTML Code Tutorial