Make content center

Question

I have the following problem. I have a container which is responsive so it will be the width of the browser. Or when the browser is large enough there will be a sidebar displayed next to it.

Inside this div I have about 10 items with the following css:

display:block;
width:200px;
height: 200px;
background: tomato;
margin: 10px;
float:left;

So they form a grid.

At this point what happens is that when the container div is 440px width for example. They will diplay nicely 2 on each row. But when the width of the container is 600 for example. still 2 are diplayed with a large white area on the left.

Now I want to center them. So the 2 should be centered in the container. I tought I would do this by adding another container warpping the elements and giving it a margin:auto; But that doesnt work:

Fiddle: http://jsfiddle.net/kqvcnugs/

So how do I make sure the items are always in the middle?

Thank in advance!

Use [inline-block instead of float](http://jsfiddle.net/kqvcnugs/3/), with `text-align: center` on the parent `div`. However, [beware of the whitespace](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements). — Vucko, Nov 05 '15 at 13:34

score 3 · Accepted Answer · edited May 23 '17 at 11:52

3

Do you mean this? http://jsfiddle.net/kqvcnugs/7/

In your case, just set to a display: inline-block; and parent div text-align: center;

But short description is:

.parent { text-align: center; }
.children { display: inline-block; }

Good luck!! :)

Like this: stackoverflow post

edited May 23 '17 at 11:52

Community

1
1

answered Nov 05 '15 at 13:39

Matej Đaković

860
4
22

1

You legend! thanx a lot – Merijndk Nov 05 '15 at 14:17

score 2 · Answer 2 · answered Nov 05 '15 at 13:35

You can make use of CSS3 flexible box layout.

justify-content: center on the parent container will align it to the center horizontally.
flex-wrap: wrap will make sure the blocks wrap to next line instead of resizing.

body {
  width: 100%;
  background: blue;
}
div {
  background: red;
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
a {
  display: block;
  width: 200px;
  height: 200px;
  background: tomato;
  margin: 10px;
  float: left;
}

<body>
  <div>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
    <a></a>
  </div>
</body>

score 1 · Answer 3 · answered Nov 05 '15 at 13:36

Instead of using float, you can use display:inline-block; and then give text-align:center; to the parent element.

body{
    width: 100%;
    background: blue;
}
div {
   background: red;
   overflow:hidden;
  /* Add text-align:center; */
    text-align: center;
}

a{
    /* Change to display:inline-block; remove float */
    display:inline-block;
    width:200px;
    height: 200px;
    background: tomato;
    margin: 10px;
}

<body>
<div>
    <a></a>
    <a></a> 
    <a></a> 
    <a></a> 
    <a></a> 
    <a></a> 
</div>
</body>

Jsfiddle

score 1 · Answer 4 · answered Nov 05 '15 at 13:40

you can try this one:

body{
    width: 100%;
    background: blue;
}
div {
   background: red;
   overflow:hidden;
    text-align: center;
}

a{
    display:inline-block;
    width:200px;
    height: 200px;
    background: tomato;
    margin: 10px;


}

DEMO HERE

Make content center

4 Answers4