I know that I COULD create a class for both of the images, but I want to make it easier on myself in the future, i.e. create a set of rules so that any images inside “examplebox” are centered unless otherwise specified.
I feel that I’ve logically done it correctly, so is css in this regard illogical or am i just getting it wrong?
The text-align:center needs to be on the parent and not on the image itself. The image has no children that can be centred. .examplebox is the parent that contains the children than need to be centred:)
As I said above text-align:center is just for inline elements. If you add block containers inside then you will have no centering because block level elements are not centred with text-align (except in ie5.x).
To center block level elements you need to give them a width and then use margin:auto. However this only allows one element on a line at a time.
To have horizontal block elements you need to float them but then margin:auto doesn’t work on floated elements and you are back to square one. It is extremely difficult to center multiple block elements of unknown size.
There is no one size that fits all and you have to take a different approach depending on all the other factors present.
That’s why its often hard to answer a question explicitly because the solution depends on what went before and what comes after