Lost on how to align

[hollys84]

So this is what i have so far

 

<div class="cleared"></div></div>

                                                 

 

<div class="container08">

<h2>Small</h2>

<p>Here comes your content</p>

</div>

<div class="container08">

<h2>Medium</h2>

<p>Here comes your content</p>

</div>

<div class="container08">

<h2>Large</h2>

<p>Here comes your content</p>

</div>

 

my problem is i cant get it to align in the center of my page...... Anyone have any ideas they can give me?    Much appreciated 

[floridaflatlander]

What do you want aligned?

 

Usually if you want to center h2

 

.container08 h2{text-align: center;} on the style sheet or in the header

 

or

 

<h2 style="text-align: center;">small</h2>

 

and ...

 

added

 

if you want to center container08

 

.container08 {

width: 50%;  /* or what ever*/

margin: 0 auto;

}

 

 

[hollys84]

.container08 {

background-color: #666;

float: left;

height: 115px;

width: 180px;

border-radius: 200px;

text-align: center;

overflow: hidden;

border: 10px solid #03C;

margin: 0px;

padding-top: 65px;

padding-right: 0px;

padding-bottom: 0px;

padding-left: 0px;

box-shadow: inset 0px 10px 5px #111, inset 0px -5px 5px #111, 0px 3px 10px #FFF;

}

.container08 p {

color: #FFF;

margin: 0px;

text-shadow: 0px -1px 1px #000, 0px -1px 1px #000;

}

.container08 h2 {

font-size: 24px;

color: #03C;

margin: 0px;

text-shadow: 0px -2px 0px #006;

}

 

 

Thats the css for it basically its three circle containers that at the moment are to the far left i wanna move the all three to the center without putting them on seperate lines if that makes any sense 

[floridaflatlander]

Well you know that the total width of the container is the width plus padding plus border plus margin don't you?

 

With that in mind float all divs left add a width that fits and play with the height if needed.

[floridaflatlander]

If your going to do stuff like this get and use firefoxes firebug, firebug color codes the divs, margins, borders and padding on the web page so you can see the styles, it will tell you what the css file name is, the name of the style, what line the style is coming from and the inheritance if any. I think chrome does the same thing.

[hollys84]

I always use chrome  but thank you for the advice

[wickedXxxxlegox]

@holly, DO NOT use what everyone else has been saying. Just use <center> and </center>

[Mahngiel]

@holly, DO NOT use what everyone else has been saying. Just use <center> and </center>

Why? and for what authority do you say that? text-align:center; is much more semantic and appropriate

[Adam]

@holly, DO NOT use what everyone else has been saying. Just use <center> and </center>

 

<center> is deprecated, and alone wouldn't achieve what the OP is after.

 

You're much better off using display: inline-block on each of the .container08 elements, with a parent element containing text-align: center. Unfortunately this isn't supported in older browsers, so there's a few little hacks you need to include.

 

Created this to demonstrate: http://jsfiddle.net/EcPcw/

 

Ensure the last four properties remain in that order.

[matthewtbaker]

Hi Holly,

 

To centre a DIV simply set the margin to:

 

margin: 0 auto;

 

I would strongly advise against wickedXxxxlegox's suggestion of using <center></center> as this merges content and styling which isn't best practice.

 

Matt