I’m trying to centre multiple div elements on a page. Some however need to not be centered so I’ve ruled out using the body element for this. I’ve figured there would be three ways to do this:
The first would be by using a container, however this adds an element for pure layout styling and isn’t very semantic.
<div id="notcentred">
<div id="container">
<div id="centrediv1"></div>
<div id="centrediv2"></div>
</div>
The second would be to create a centre class and simply adding it to each element that needs to be centered.
<div id="notcentred">
<div id="centrediv1" class="centre"></div>
<div id="centrediv2"class="centre"></div>
The third would be to add the centre CSS to each DIV’s id.
<div id="notcentered">
<div id="centrediv1"></div>
<div id="centrediv2"></div>
I would think number 2 would be best, as it would be the easiest to manage, and the most semantic, but if there is anything I’m unaware of, options would be welcome.
Thanks in advance.
This is the exact use classes were designed for. So, really, using idealistic CSS the third one is wrong. The first two are absolutely fine.
Although, if you want all the divs to be similar, putting some in a wrapper div may make it harder to style their other settings. The second also allows you to more easily have centered divs dispersed among non-centered divs. The second also has fewer elements, which will make your code a lot easier to read!
With this in mind, I would recommend the second.