Wednesday, January 24, 2007

Linda's How-Do-I Series? How Do I Center My Banner, Button, Text Or Picture?

Have you ever wondered how you center a banner, button, text or picture?

Well, if you have here's how you would center a picture.

Let's say I want to center my Linda Walsh Originals E-Patterns button which I've named LWOEpatterns150x150.jpg. The HTML code I would use to do so is as follows (minus the ***'s which are there so you can view the HTML in this article):

<***center> <***a href="http://lindawalshoriginalsepatterns.com"> <***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LWOEpatterns150x150.jpg" /> <***/a> <***/center>

and that would produce this result:



The <***center><***/center> (minus the ***'s) is the HTML coding to center a picture, text, a table, etc.

The <***a href="http://lindawalshoriginalsepatterns.com"><***/a> string (minus the ***'s) makes the picture clickable back to my Linda Walsh Originals E-Patterns website and the <***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LWOEpatterns150x150.jpg" /> (minus the ***'s) is my button pictures URL.

If you wanted to use a string to center text - like Linda Walsh Originals E-Patterns the HTML code would look like this (minus the ***'s which are there so you can view the HTML in this article):

<***center><***a href="http://lindawalshoriginalsepatterns.com">Linda Walsh Originals E-Patterns<***/a><***/center>

and that would produce this:


Linda Walsh Originals E-Patterns


And If I wanted to do a combination of both - say, my button picture and my text link then the HTML code would look like the following (minus the ***'s which are there so you can view the HTML code in this article):

<***center><***a href="http://lindawalshoriginalsepatterns.com"><***img src="http://i24.photobucket.com/albums/c47/LWOriginals/LWOEpatterns150x150.jpg" /><***/a><***br/><***a href="http://lindawalshoriginalsepatterns.com">Linda Walsh Originals E-Patterns<***/a><***/center>

and that would produce this:



Linda Walsh Originals E-Patterns


All of the lines of coding and sections above contain 3 ***'s. They are there only to allow for you to view the html code above and should not be included in your html code.

There are other ways of changing the alignment. If you should see the following command in your blog's template such as "text-align: left;" (minus the quotes "") this means that everything is going to be aligned towards the left. If you want to change the text and pictures to be aligned towards the center then you would just replace "left" above with "center" (minus the quotes"") so it would look like this:

text-align: center;

You might also see HTML coding like the following (minus the ***'s which are there so you can view the HTML in this article):

<***div align="left"><***/div>

This, again is commanding everything to be directed towards the left. To change this so everything is centered you would replace "left" above with "center" (leaving the quotes "" in this time) so it would look like this:

<***div align="center"><***/div>

I hope this helps you with the various ways to align your pictures and text.


Posted by Linda Walsh Originals- "Doll Patterns for Grown-up Girls!"

No comments:

Post a Comment