The codes below can be used in e-mail and non-Webtv PageBuilder webpages (geocities, tripod, wtv-zone, etc.) to center and align images and text.

---

If you are using the Webtv PageBuilder, and you are not using an "advanced editor" method, you can use the codes below to align and center images and text in the "add an item" -- "text" areas by adding <<>/td><<>/tr><<>/table> at the beginning of each "add an item"--"text" area, such as:

<<>/td><<>/tr><<>/table>
<<>div align="center">
Rest of codes and section content here
<<>/div>
<<>table><<>tr><<>td>

More information on the method above:
http://community.webtv.net/Pwilliamandx/morestuff5/index.html

---

 
If you are using the Webtv PageBuilder, you can use the codes below with an "advanced editor" method (using just one "add an item"--"text" area for all of your codes), such as:

<<>/--><<>/head>
<<>body codes here>
<<>div align="center">
Rest of codes and page content here
<<>/div>

After adding the codes above, you need to publish the page and then add the following codes into the "edit title" area:

your_page_name<<>/title><<>!--//>

and then publish the page again. Click here for detailed instructions on using an "advanced editor" method.

---

If you use more than one "add an item"--"text" area with the "advanced editor" method, use the codes above in the first "add an item"--"text" area, and then use the method below in the additional "add an item"--"text" areas.

You can use the codes below to align and center images and text in the additional "add an item"--"text" areas by adding
<<>/td><<>/tr><<>/table> at the beginning of each additional "text" area, such as:

<<>/td><<>/tr><<>/table>
<<>div align="center">
Rest of codes and section content here
<<>/div>
<<>table><<>tr><<>td>

More information on the method above:
http://community.webtv.net/Pwilliamandx/morestuff5/index.html

---

Or you can add the codes below directly to the
"Add an item"--"Heading" areas
to center and align images and text.

---

If you are adding images directly from the scrapbook, the page style you select determines how the images are placed on the webpage. More information:

http://community.webtv.net/Pwilliamandx/alignment/index.html
and
http://community-2.webtv.net/Pwilliamandx/centering2/index.html

Using just

<<>img src="url of image">
<<>br>text here<>

will align the image and text to the left of the page.

x

Using

<<>center><<>img src="url of image">
<<>br>text here<><<>/center>

will align the image and text in the center of the page.

x

Using

<<>img src="url of image" align="right">

will align the image to the right of the page.

The <<>div align="center"> and <<>/div> tags can be used instead of the centering tags, and it can be used to align items to the left and right ( <<>div align="left">..<<>/div> and <<>div align="right">..<<>/div> ):

Using

<<>div align="center"><<>img src="url of image">
<<>br>text here<><<>/div>

will align the image and text in the center of the page.

x

Using

<<>div align="right"><<>img src="url of image">
<<>br>text here<><<>/div>

will align the image and text to the right of the page.

text here

Using

<<>center><<>img src="url of image" width="??"><<>img src="url of image" width="??"><<>/center>

will align 2 images side by side----but the combined widths of the images cannot exceed the width of the webpage (544); if the combined widths of the images exceed the width of the webpage, then one image will appear below the other image, instead of side by side.

Using

<<>center><<>img src="url of image" width="??" hspace="5"><<>img src="url of image" width="??" hspace="5"><<>img src="url of image" width="??" hspace="5"><<>/center>

will align 3 images side by side (the hspace attribute adds a blank space between the images):

Using <<>img src="url"> will have the image automatically aligned to the left of the page, and any text that follows will start near the bottom of the image and then wrap underneath the image.

Using <<>img src="url" align="left"> will have the image align to the left side of the page, and the text will start near the top of the image, flow to the right of the image, and then wrap underneath it. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text.

Using <<>img src="url" align="right"> will have the image align to the right side of the page, and the text will start near the top of the image, flow to the left of the image, and then the text will eventally wrap underneath it. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text. Demo text.

If you use the codes in this combination, you can have 3 images on the same line---provided the combined widths of the images do not exceed the width of the page:

Using
<<>div align="center"><<>img src="url" align="left"><<>img src="url" align="right"><<>img src="url"><<>/div>

More alignment codes:

Using <<>img src="url" align="top"> will have the image align to the left side of the page, and one line of the text will start near the top of the image, and then the text will wrap underneath it.

Using <<>img src="url" align="middle"> will have the image align to the left side of the page, and one line of the text will start at the middle of the image, and then the text will wrap underneath it.

Using <<>img src="url" align="bottom"> will have the image align to the left side of the page, and one line of the text will start near the bottom of the image, and then the text will wrap underneath it.

And try this with the align=middle attribute for multiple images on the same line:

Using
<<>center> <<>img src="url" width="40" align="middle">
<<>img src="url" width="75" align="middle">
<<>img src="url" width="150" align="middle">
<<>img src="url" width="75" align="middle">
<<>img src="url" width="40" align="middle">
<<>/center>

<<>img src="url of image" align="left"><<>img src="url of image" align="right">text (or anything else) here will appear in-between the images

text (or anything else) will appear in-between the images

Or use the <<>br clear="all"> tag to move the text (or anything else) below the images:

<<>img src="url of image" align="left"><<>img src="url of image" align="right"> <<>br clear="all">text (or anything else) here will appear below the images

text (or anything else) will appear below the images

Or, use the method below, and the hspace will create space between the 2 images; adjust the hspace for more or less space between the images:

<<>center><<>img src="url of image" hspace="10"><<>img src="url of image" hspace="10"><<>/center>

Or use a table, and the cellpadding will create space between the images:

<<>center><<>table cellpadding="20"><<>tr align="center">
<<>td><<>img src="url of image"><<>/td>
<<>td><<>img src="url of image"><<>/td>
<<>/tr><<>/table><<>/center>

The codes below will put one image to the left of the page, one to the right and one in the center of the page (if the combined widths of the images do not exceeed the width of the webpage---544):

<<>div align="center"><<>img src="url of image" align="left"><<>img src="url of image" align="right"><<>img src="url of image"><<>/div>

Or, use the method below, and the hspace will create space between the 3 images; adjust the hspace for more or less space between the images:

<<>center><<>img src="url of image"><<>img src="url of image" hspace="50"><<>img src="url of image"><<>/center>

Or use a table, and the cellpadding will create space between the images: