How to align a div in center of page

Question

I'm making a mobile website & I'm stuck in a problem. I have a main div and inside it there are three div's. Earlier I wanted it left aligned but now I want to align these three div's to the center of the page. i.e. if the screen of the device is wide it should come to the center, right now it's left aligned.

I tried many ways but not able to get it. Here is the code & css I know the sizes should be in em's & not pixels; I'll fix that soon.

<div class="main-buttons">
<div class="box1"><a href="#"></a></div>
<div class="box2"><a href="#"></a></div>
<div class="box3"><a href="#"></a></div>
</div><!-- MAIN BUTTONS ENDS HERE -->


.main-buttons{ height:42px; padding:5px 10px 5px 10px; background-color:#FFFFFF; border-bottom:dotted 1px #7c7c7c;}

.box1 a { background-image:url(images/box1.jpg); height:42px; margin-right:6px; width:65px; }
.box2 a { background-image:url(images/box2.jpg); height:42px; margin-right:6px; width:65px; }
.box3 a { background-image:url(images/box2.jpg); height:42px; width:65px; }

possible duplicate: http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-of-the-page — madflow, Jan 21 '12 at 18:01

Pankaj Upadhyay · Answer 1 · 2012-01-21T18:35:19.630

0

You can achieve this in CSS by setting the margin property.

For the parent div use the following css and it should work fine

.main-contents
{
    margin: 10px auto; 
    height:42px; 
    padding:5px 10px 5px 10px; 
    background-color:#FFFFFF; border-bottom:dotted 1px #7c7c7c;
    overflow: hidden;
}

.box1, .box2, .box3
{
    float:left;
}

edited Jan 21 '12 at 18:35

answered Jan 21 '12 at 18:02

Pankaj Upadhyay

12,966
24
73
104

Thanks for your reply, bt its not working. sorry if my question is confusing i want it to be horizontally center aligned. – Aditi Nilangekar Jan 21 '12 at 18:10
I am not sure how can this not work.... in your CSS for `.main-buttons` , add the margin property I specified in answer and it should work the way you want.... – Pankaj Upadhyay Jan 21 '12 at 18:26
I don't know whats wrong i tried ur method but still its not working fine, may be b'coz i have * { margin:0; padding:0; } in my CSS, i tried removing it for testing but still its not coming in center. – Aditi Nilangekar Jan 22 '12 at 09:30

score 0 · Answer 2 · edited Jan 27 '12 at 08:30

I got the solution I just had to add one more line of css & had to put my sub div's inside this div. As i do not want to add width to my main parent div, i added one more div & gave {margin:0 auto;} to it. I dont know if this method is right but it solved my problem.

<div class="main-buttons">
<div class="sub-buttons">
<div class="box1"><a href="#"></a></div>
<div class="box2"><a href="#"></a></div>
<div class="box3"><a href="#"></a></div>
</div><!-- SUB DIV ENDS HERE -->
</div><!-- MAIN BUTTONS ENDS HERE -->

CSS:

.main-buttons{ height:42px; padding:5px 10px 5px 10px; background-color:#FFFFFF; border-bottom:dotted 1px #7c7c7c;}
.sub-buttons{ width:202px; height:42px; margin:0 auto;}

.box1 a { background-image:url(images/box1.jpg); height:42px; margin-right:6px; width:65px; }
.box2 a { background-image:url(images/box2.jpg); height:42px; margin-right:6px; width:65px; }
.box3 a { background-image:url(images/box2.jpg); height:42px; width:65px; }

How to align a div in center of page

2 Answers2