Centering content of div in a container

Question

In my website, i have a series of divs like this:

.box{
   float:left;
   width:143px;
   height:183px;
   overflow:hidden;
}

These divs are inside a simple container like this:

.container{
   margin:70px 190px 0 190px;
   overflow:hidden;
}

I would realize a responsive layout but the divs are not horizontal centered in the container. I tried to add "margin-left:auto;" and "margin-right:auto" but nothing. I have a layout as this:

Instead, i would a layout as this:

Can someone help me?

Answer 1

Solution using FlexBox.

FlexBox Guide

FlexBox Browsers Compatibility

 .container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; margin:7px 19px 0 19px; background-color: red; } .box { width:143px; height:183px; margin: 10px; background-color: black; } 

 <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> 

Answer 2

See this fiddle

You can achieve this using display:inline-block; , So kindly remove the float:left used in your CSS.

I have made an example like below,

HTML

<div class="container">
    <div class="div1">
    </div>
    <div class="div1">
    </div>
    <div class="div1">
    </div>
    <div class="div1">
    </div>
</div>

CSS

.div1{
    margin:10px;
    width:25%;
    height:100px;
    display:inline-block;
    background-color:red;
}

Answer 3

You can not achieve this using float . You can use display: inline-block .

.box{
    width:143px;
    height:183px;
    overflow:hidden;
    display: inline-block;
}
.container{
    margin:70px 190px 0 190px;
    overflow:hidden;
    text-align: center;
}

Answer 4

 *{ padding: 0; margin: 0; box-sizing: border-box; } .container{ overflow: hidden; max-width: 500px; margin: 0 auto; } .box{ float:left; width: 31%; height: 183px; background: #f00; margin: 1%; } 

 <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div>