Basic CSS Tutorial

Centering

If you want to center something horizontally that's inside a BLOCK-type box, all you have to do is add your text-align: center; class to the tag for the box - <div class="center">. Centering the box itself takes a little more work and depends on how you set up your page.
If you want to center everything on your page, you can add text-align: center; to the body section of your CSS file but if you have any BLOCK boxes they won't move because they take up the whole width of your page. Everything inside of them will be centered inside them but not necessarily centered on the page. Even the contents of our table will be centered because cells are INLINE boxes.

Our outer-wrapper is no longer taking the full the full width of the page but, because it's a BLOCK, it still won't move unless you add a margin. The handy tool we have for that is margin: auto;. Using this, if our page is 1000 pixels wide and our outer-wrapper is only 800, the browser does the math and moves the outer-wrapper over so that it's centered - auto margin simply calculates the difference in width between the two objects and divides by two. So now our outer- wrapper has a margin of 100 pixels on both sides. BUT margins, padding and borders take up some of that space so, since we have all three on either the page or the outer-wrapper, the formula for calculating the difference is a lot more complicated. Not to worry, computers were created to do complicated math problems and they do them at the speed of light.

In order to center something using the auto margin, you sometimes have to assign a width to it. It can be a relative width like a percentage but it can't be an auto width (yes, we have that too in some cases). We've already assigned a width to our outer-wrapper, so go down to its section in your CSS file and add margin: auto;. Keep in mind, that when we only use ONE value for a margin, it affects all four sides but the default for auto margin is 'don't do anything to the top or bottom'. So you go can UNDER that auto margin line and add a margin for the top or bottom or both if you want. Now our outer wrapper is balanced on the page.
Centering an inline box is simple as long as it's inside a block box. You can center it without but it's more complicated than we want to go into in a basic tutorial. So, if you want to center a link in the middle of your page, you'll need to add a div, a paragraph, a heading or similar block, put the link inside that and then use text-align: center; on the block box.
<div class="center"><a href="file.htm">Link</a></div> will produce
Link
One more way to center something large like our outer-wrapper that takes up most of our page, is to add padding to the body and let the outer-wrapper fill the rest of the space instead of setting a width for outer-wrapper. If you have 200px of padding all the way around your body (or just the left and right sides), the outer-wrapper will LOOK centered because it starts at the pixel next to the left padding and goes all the way over to the pixel next to the right padding.

Centering Captions

There is a special tag for captions in HTML and CSS but it seems overly complicated to me. The easiest way to put a caption on an image (or any other item except a table) is simply to put them both in a div. I've added a light border so you can see what's happening. A standard caption would be
<div><img src="images/spot.jpg"><br>My dog, Spot</div> and produces.

My dog, Spot
If you want them centered, add your center class to the div.
<div class="center"><img src="images/spot.jpg"><br>My dog, Spot</div>

My dog, Spot
To center only the caption, add the WIDTH of the IMAGE to the DIV to keep it from stretching across the page.
<div class="center" style="width: 197px;"><img src="images/spot.jpg"><br>My dog, Spot</div>

My dog, Spot


If your image has a border or margin, or if your div has a border or padding, you'll need to add those measurements (both sides) to the width of your div.
<div class="center" style="width: 209px; padding: 5px;"><img src="images/spot.jpg" style="border: 1px solid blue;"><br>My dog, Spot</div>
You can put the caption on top
<div class="center" style="width: 197px;">My dog, Spot<br><img src="images/spot.jpg"></div>
My dog, Spot
Or leave out the line break, float the image, and widen your div to put the caption on one side or the other (only useful for very long captions). Don't forget to turn off the float!
<div class="center" style="width: 297px;"><img src="images/spot.jpg" style="float: left;">My dog, Spot</div>

This is a picture of my dog, Spot. He's cute and he likes to chew on his bone and play ball with me. Tomorrow we get to go to the park with my mom!
How it looks. Our outer wrapper box is now centered.

Previous Next