Alignment For Text And Images





I prefer to use the heading box for alignment of text, images and tables. The reason being is that the text box usually has a default left alignment, depending on the page style that you are using. The center tags will always work and tables align much more easier in the heading box.

One thing about using the heading box for alignment is that you will not usually see the new alignment in edit, but you will in preview and if you go directly to your republished webpage. You may need to press cmd and R to see the new change on your published webpage, if you have just editted it.

You can center your text by putting it in a heading box and by using this code:

<center>Your text here </center> You can also set the text to the right or the left using the paragraph tag like this: <p align="right">Your text here</p>

It would look like this.

Your text here

Your text will be in bold text, though, using this code in the heading box. We can undo the default center alignment in the heading box by using table codes like this:<table width="100%"><tr><td align="center">Your text here</td></tr> </table> You can easily align your text to the left using this code like this: See this example:
<table width="100%"><tr><td align="left"> Your text here</td></tr></table> This will align your text to the left of the page. If you want your text to be right align aligned, just replace the "left" with "right" in the code above.

We can use tables in the heading box to set margins like this:

Since the table is less than 100%, I had to add center tags. I don't know why that is, exactly.


You may also want to change the alignment of your images on your webpage. You will need to know your scrapbook URL to realign an image. For help with finding your scrapbook URL, go to Finding Your Scrapbook URL. Remember that your image code is going to be <img src="URL of image"> Then, you can center images by using the center tags in the heading box like this: <center><img src="URL of image"></center> Your images won't appear centered in edit, but they will in preview. You can also align your images to the right or to the left in the heading box by using this code for aligning the image to the right: <img src="URL of image" align="right"> To align your image to the left, just replace align="right" to align="left" in the code above.


Quick Links Index