I still don't get CSS (Dreamweaver)

Barks · 1 Oct 2012 at 19:54

I'm making really good progress with Dreamweaver now but I still don't really understand CSS.

Say I've created a wrapper box, then three boxes inside: header, main, footer.
I then create another few boxes within the 'main' box of varying fixed pixel dimensions to shove in text/images etc.

How do I get an image to align centrally (vertically and horizontally) in one of the sub-boxes within my 'main' box?
I don't really understand which property you're supposed to use within the CSS properties for the sub box? Or do you create a class for the image and apply the CSS to that to get it to align centrally? Ah... confusion!

Would it be easier to use good old fashioned tables within the 'main' box? I was told in the tutorials I've used to avoid them like the plague.

I'd be really grateful if someone could explain it to me.

Barks · 1 Oct 2012 at 21:26

I'm using margins but this is only going to work if everything has specific set pixels for width and height.

Barks · 2 Oct 2012 at 09:55

Thanks for the links guys.

I can align an image horizontally by setting the margin to 0 auto and I understand why this works.

I still can't get an image to align vertically using a similar method. The only solution I have found is to work in pixels and use values in the margin properties to get the image positioned where I'd like it. It works and seems to look pretty good on Firefox/IE/Safari.

Barks · 2 Oct 2012 at 13:31

LazyManc said:
That's because there is currently no widely-supported way to automatically center vertically using CSS. There's a box alignment model in CSS3 but AFAIK it's not got a lot of browser support at the minute: http://dev.w3.org/csswg/css3-align/

In the meantime you can approximate vertical centring by playing with the padding on the parent of whatever you're trying to centre.

Don't be tempted to bung in tables just because you can vertically align cells. HTML is a representation of what the content *is* and not what it should look like (which should be left to CSS).

I'm managing by doing just that; playing about with the margins. It's not really a problem because the websites I'm developing are fixed not liquid. I just thought it was ridiculous not being able to vertically centre an image although now I've got a greater understanding of CSS and web design in general I'm beginning to see why.

Thanks for the help lads