Centering div so content of it will always be in middel

Question

I'm trying to center the div{class="informationbox"} so that the div's inside will always be centered in the page, No matter how many divs there is inside.

.informationbox{
  left: 0;
  right: 0;
  margin: 0 auto;
  display:block;
  position: absolute;
}

<div class="informationbox">
        <div style="display: inline-block;">
            <img src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
            <p>Something</p>
            <p>Wall of Text</p>
        </div>
        <div style="display: inline-block;">
            <img src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
            <p>Something</p>
            <p>Wall of Text</p>
        </div>
        <div style="display: inline-block;">
            <img src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
            <p>Something</p>
            <p>Wall of Text</p>
        </div>
</div>

You want the divs inside or the informaiton div to be in the center? — Aslam, Dec 02 '16 at 08:38
The div inside the information div, has to be centered in the page. so no matter if there is 1 or 10 then they will be as centered as posible — , Dec 02 '16 at 08:39
what about the information div? You want it to be center of the parent element? — Aslam, Dec 02 '16 at 08:40
There is simple flexbox solution http://codepen.io/anon/pen/WodaPZ — Belmin Bedak, Dec 02 '16 at 08:42

Mr. Hugo · Answer 1 · 2016-12-03T19:34:24.217

Just add text-align center to the informationbox and remove all other css. Note that this ONLY works because (all) your content is inline (your divs have display: inline-block).

.informationbox{
   text-align: center;
}

<div class="informationbox">
        <div style="display: inline-block;">
            <img src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
            <p>Something</p>
            <p>Wall of Text</p>
        </div>
        <div style="display: inline-block;">
            <img src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
            <p>Something</p>
            <p>Wall of Text</p>
        </div>
        <div style="display: inline-block;">
            <img src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
            <p>Something</p>
            <p>Wall of Text</p>
        </div>
</div>

WARNING: When you use this solution, you might end up with unwanted space between the inline-block elements. This is due to the fact that there is a 'space' (the character) between them. This can be solved by opening the next div IMMEDIATELY after closing the previous one.

score 1 · Answer 2 · answered Dec 02 '16 at 08:38

.informationbox{
  left: 0;
  right: 0;
  margin: 0 auto;
  display:block;
  position: absolute;
  display: flex;
  justify-content: space-around; /*or "center"*/
}

<div class="informationbox">
        <div style="display: inline-block;">
            <img src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
            <p>Something</p>
            <p>Wall of Text</p>
        </div>
        <div style="display: inline-block;">
            <img src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
            <p>Something</p>
            <p>Wall of Text</p>
        </div>
        <div style="display: inline-block;">
            <img src="https://c1.staticflickr.com/1/342/19541848580_7f925817c9_b.jpg" />
            <p>Something</p>
            <p>Wall of Text</p>
        </div>
</div>

Centering div so content of it will always be in middel

2 Answers2