Menu
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!
342
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
131
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
