Hi

I have a div that is my header. I tried to put a hyperlink(using the a tag).

I then wanted to center this. So I first tired text-align: center; This did not work.

I then tried to use margin on it. I did margin-left and margin-right on it. This worked I centered it.

I then tried to use margin-top on it to get it away from the top of my div header. This did not work. It had no effect on it. So I don't know why. I even did like margin-top: 5000px; but still nothing.

I then tried to use padding and same thing.

Finally I used position and it work by using position relative.

So when do I use what?

Thanks

Another classic way of centering a <div> tag or any block level element would be the margin: 0 auto;

Maybe you've put in your navigation list inside a <div>. So that it may be easier to style and position.

Do you know how to use shorthand CSS for margins?

Here's an example:

margin: 1px;

One value - This will give a 1px margin to the element at all sides (top, bottom, left, right)

margin: 1px 2px;

2 values - This will apply a 1px margin for the top and bottom sides and the 2px for the left and right.

margin: 1px 2px 3px;

3 values - This will apply the 1px to the top, 2px to the left and right sides and the last value 3px for the bottom side

margin: 1px 2px 3px 4px;

4 values - This will apply the 1px to the top, 2px to the right side, 3px to the bottom side and the 4px to the left side. (values are applied clockwise starting from top).

So back to our objective of centering the element. Whether its a <div> that contains your navigation ot the whole page itself (if you put your website's content in a div), you can make the element appear in the center using margin: 0 auto;

Realise that this is a shorthand margin with 2 values. So the browser will apply a value of zero (0) for the top and bottom sides and it will automatically calculate the width (if or not you've set a width for your block level element that you want to center) of the element that you want to center and it will position it in the center.

The value auto does this. It checks the width of the element and calculates and centers the element appropriately.

Hope this helps.

Kenneth Jaysone Francis