Align Something in HTML

Proper coding requires the use of CSS to align things in HTML, but not all websites let you customize the style-sheets so you can properly align the parts of your web page. Find out how to align something in HTML so it appears the way you want, even when you can't add a style-sheet to the site to do it. This technique is called "inline" CSS.

Steps

Align Text with HTML

1. Surround each section that will have changed alignment with a "div". That means, you need to add "div" inside the "less than" and "greater than" symbols (<>) before the first HTML tag that will have its alignment changed, and add "/div" inside these symbols after the last HTML tag that will have its alignment changed.
2. Determine how you need to change the alignment of the text in that "div".
3. If you need left-align the text, change the "div" tag so that the following text is inside the "<>" symbols: div style='text-align:left'.
   • If you need to right-align the text, change the "div" tag to "div style='text-align:right'" within the "<>" symbols.
   • If you need center-align the text, change the "div" tag to "div style='text-align:center'" within the "<>" symbols.
   • If you need to justify the text, change the "div" tag to "div style='text-align:justify'" within the "<>" symbols.
4. Save your changes.
5. Verify your content's appearance to make sure it worked.
   • If it didn't work, then the website has specific coding in its style sheet that overrides your "div". Override the site style-sheet by adding the appropriate version of "style='text-align:right'" inside the opening tag of each element to have its alignment changed. For example, a "p" tag would become "p style='text-align:right'" within the "<>" symbols.
6. Enjoy seeing your text display exactly how you wanted.

Align Images with HTML

1. Find the HTML code for the image you want to align.
2. Edit the "img" tag to add the appropriate "float" property to it.
   • If you need the image to hang to the left, add "style='float:left'" to the tag, as in "img style='float:right'" within the "<>" symbols.
   • If you need the image to hang to the right, add "style='float:right'" to the tag, as in "img style='float:right'" within the "<>" symbols.
   • If you need the image to hang in the center, the code gets a bit more complicated. There is not "float:center" property, so you have to add the work-around "style='align:center;text-align:center'" to the tag, as in "img style='align:center;text-align:center'" again within the "<>" symbols.
3. Save your code.
4. Enjoy your aligned images.

Tips

• You may have seen the "p align='center'" (within <>) used for changing text alignment. Avoid it as it is out of date, and it's only a matter of time before the major browsers stop supporting it.
• The instructions for how to align images with HTML also allow you to align sections with HTML. Surround the section with "div" tags, as in the instructions for how to align text with HTML. Add the "float" property to the "div" tags like you do to the "img" tags in the image alignment directions.
• If the code won't display properly whatsoever, it's possible that the website has a filter in place to strip all such coding from the HTML. However, it's also possible that your code lacks a semicolon, angle bracket, or quotation mark, any of which would keep the code from working. Check for that, particularly if some of the code is applying properly and some isn't.

Related Articles

• Link Within a Page Using HTML
• Change Text Color in HTML
• Shim Text Around a Table in HTML
• Create a Simple Web Page With HTML

Sources and Citations

• http://www.w3schools.com/tags/att_p_align.asp
• http://www.w3schools.com/tags/att_img_align.asp
• http://www.w3schools.com/CSS/css_howto.asp

See also

• Choose an HTML Editor
• Resize iFrames in HTML
• Create a Simple Web Page with HTML
• Set a Background Image in HTML
• Insert Images with HTML
• Create a Calculator Using HTML
• Insert Spaces in HTML
• Underline Text in HTML
• Add a Hyperlink with HTML
• Set Background Color in HTML

Read more ...