How to align divs inside centered div

Question

i have problem with align divs inside main centered div.

Here is my code

<style>
body {
  max-width: 1150px;
  min-width: 900px;
  margin:0 auto; }

.container {
  text-align:center;
  background-color:#e1e1e1; }

.box {
  width: 250px; }

.inline-block {
  color: #eee;
  margin: 10px 0px 0px 10px;
  text-align: center;
  display:inline-block; }

.one {
  height: 22px;
  background: #744; }

</style>

<div class="container">
    <div class="inline-block"><div class="one box">1</div>
    </div>
    <div class="inline-block"><div class="one box">2</div>
    </div>
    <div class="inline-block"><div class="one box">3</div>
    </div>
    <div class="inline-block"><div class="one box">4</div>
    </div>
    <div class="inline-block"><div class="one box">5</div>
    </div>
    <div class="inline-block"><div class="one box">6</div>
    </div>
    <div class="inline-block"><div class="one box">7</div>
    </div>
    <div class="inline-block"><div class="one box">8</div>
    </div>
</div>

Result when i resize window

What i need

P.S. Sorry for my English, i hope you understand this.

Here are two simple methods to center divs within divs, vertically, horizontally or both (pure CSS): http://stackoverflow.com/a/31977476/3597276 — Michael Benjamin, Aug 20 '15 at 15:13

score 0 · Answer 1 · answered Feb 24 '13 at 12:53

0

Here is the DEMO

Just it's simple add Float:left to it

answered Feb 24 '13 at 12:53

coder

13,002
31
112
214

Thank you, but template should be centered, and i dont want use float. – Feb 24 '13 at 13:12
what is the template here? Be specific with the question what you ask here. – coder Feb 24 '13 at 13:12

score 0 · Answer 2 · answered Feb 24 '13 at 13:21

0

I think .container { text-align:left;} will do the trick for you, of course then you'll need .container > div { text-align:center;}. And I would also suggest to add classes to those divs so you don't have to use the immediate child selector.

answered Feb 24 '13 at 13:21

xpy

5,481
3
29
48

How to align divs inside centered div

2 Answers2