Allign Child DIVs to center

Question

I'm trying to align some tiles that I have in my website to center. There are 4 tiles with two in the first row and other two in the second. I'm trying to align these DIVs to the center of the page but I'm not able to.

I've added margin: 0 auto; to the parent DIV and also included position: relative and display: inline-block; as suggested by some other posts but not able to align in yet.

Below is the code that I'm writing:

<div class="parent">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="clear"></div>
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="clear"></div>
</div>

The CSS Code:

.parent{
  width: 1000px;
  margin: 0 auto;
  position: relative;
}
.child{
  float: left;
  margin: 2px auto;
  width: 25%;
  background-color: green;
  position: relative;
  display: inline-block;
}
.clear{
  clear: both;
}

And the jsfiddle: http://jsfiddle.net/wj1a2fnj/4/

After all this I'm not able to align the child DIVs to the center. I'm a novice in CSS and figuring my way now. Any help will be greatly appreciated.

Thank you.

Anonymous · Accepted Answer · 2014-10-08T09:25:18.013

You need to remove float: left; from the .child and add text-align: center; to the .parent div to center inline-block child elements inside it.

Try this - DEMO

.parent{
    width: 1000px;
    margin: 0 auto;
    text-align: center;
    font-size:0; /* to remove the white space between inline-block elements */
}
.child{
    display: inline-block;
    margin: 2px auto;
    width: 25%;
    background-color: green;
    font-size:16px; /* reset the font size (i.e 1em = 16px) */
}

You could also add a <br> tag instead of <div> tag after the second child - http://jsfiddle.net/p6rkw5ax/

Benjamin · Answer 2 · 2014-10-08T09:16:17.880

1

Add text-align: center; to your parent div and it works

.parent{
    width: 1000px;
    margin: 0 auto;
    text-align: center;
    font-size: 0; --> To make the space void in between divs
}

ADD

.child{
    <--float: left;--> REMOVED
    font-size: 14px;
    display: inline-block; --> To make the div float next to each other
}

WORKING EXAMPLE

edited Oct 08 '14 at 09:16

answered Oct 08 '14 at 09:10

Benjamin

2,612
2
20
32

Rahul Desai · Answer 3 · 2014-10-08T09:35:10.420

0

text-align: center works

Just add it to your CSS for child class.

http://jsfiddle.net/wj1a2fnj/6/

EDIT:

The reason why its not aligning the parent div to the center is because you are using floats. Remove the float and adjust margin: 0 auto and you will get what you want;

Updated Fiddle: http://jsfiddle.net/wj1a2fnj/19/

edited Oct 08 '14 at 09:35

answered Oct 08 '14 at 09:07

Rahul Desai

15,242
19
83
138

I'm trying to align the whole div in the center and not just the text. what I want to do it to align the DIVs in the center of the page. i.e. have all the 4 tiles at the center of the page and not just the text. – Amit Nandan Periyapatna Oct 08 '14 at 09:11

score 0 · Answer 4 · answered Oct 08 '14 at 09:09

You could do something like this...

    <div align="center">
       <div>whatever you want to align</div>
    </div>

Just make sure whatever you are aligning to center has a relative css position and not absolute or anything else...

score 0 · Answer 5 · answered Oct 08 '14 at 09:24

DEMO

.parent{
    width: 1000px;
   margin: 0 auto;
    list-style: none;
    position:relative;
    text-align: center; 
    vertical-align: middle;
}
.child{
display: inline-block;
    margin: 2px auto;
    width: 25%;
    background-color: green;
}

Allign Child DIVs to center

5 Answers5