How to center horizontally divs inside another div

Question

I'm trying to center div's inside one outter div, but I can't.

My html is something like this :

<div class="outterDiv">
  <div class="innerDivBig">
    <div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
      Inner Div
    </div>
    <div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
      Inner Div
    </div>
    <div style="width: 180px; float:left;margin-right: 5px;background-color: yellow;">
      Inner Div
    </div>
    <div style="clear:both"/>
  </div>
</div>

And my css is something like this :

.outterDiv{
 width: 600px;
 border: 1px solid #f00;
 text-align: center;
}

.innerDivBig{
  margin: 0 auto;
  display:table;
}

Here is jsfiddle.

Are you trying to fit all 3 divs centered under each other or side by side? — Jonathan Nielsen, Jul 29 '16 at 10:43
I want that they are side by side. That's why there is float left. — Boky, Jul 29 '16 at 10:44

Tuhin · Answer 1 · 2016-07-29T11:42:14.060

1

.outterDiv{
 width: 600px;
 border: 1px solid #f00;
 text-align:center;
}

.innerDivBig{

  display: inline-block;
}

https://jsfiddle.net/2a8514nf/7/

edited Jul 29 '16 at 11:42

answered Jul 29 '16 at 10:45

Tuhin

3,335
2
16
27

Is there any way that the fourth one is left, and not in the middle? [jsfiddle](https://jsfiddle.net/2a8514nf/2/) – Boky Jul 29 '16 at 11:26
https://jsfiddle.net/2a8514nf/7/ – Tuhin Jul 29 '16 at 11:41

Jonathan Nielsen · Answer 2 · 2016-07-29T11:31:18.107

0

UPDATE: https://jsfiddle.net/2a8514nf/4/

I use display: table because the browser calculates the width to fit all the child elements width display: table-cell so that you wont have to worry about the width.
I also use padding instead of margin since it does not expand the element so the parent size remains the same.

.outer {
    width: 500px;
    border: 1px solid #000;
    padding: 15px;
    margin: 0 auto;
}

.inner {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.inner > div {
    display: table-cell;
    padding: 0 5px;
    text-align: center;
}

.inner > div > div {
    padding: 15px;
    text-align: center;
    border: 1px solid #00F;
}

<div class="outer">
    <div class="inner">
        <div>
            <div>Inner Div 1</div>
        </div>
        <div>
            <div>Inner Div 2</div>
        </div>
        <div>
            <div>Inner Div 3</div>
        </div>
    </div>
</div>

edited Jul 29 '16 at 11:31

answered Jul 29 '16 at 10:51

Jonathan Nielsen

1,442
1
17
31

I need that the inner div's have fixed width. – Boky Jul 29 '16 at 11:25
@Boky I've updated your JSFiddle and my answer. – Jonathan Nielsen Jul 29 '16 at 11:31
And if I have fourth one, can it be left positioned instead of in the middle? [jsfiddle](https://jsfiddle.net/2a8514nf/5/) – Boky Jul 29 '16 at 11:35
It would like like this https://jsfiddle.net/2a8514nf/6/ Is this what you want? – Jonathan Nielsen Jul 29 '16 at 11:38

How to center horizontally divs inside another div

2 Answers2