问题描述:

I have set up a grid layout that is responsive and stacks as you decrease the page size.

However, how can I center the three divs? You will notice that at full expansion they are slightly off center.

http://www.naturettl.com/shop/

Thanks.

网友答案:

You can do this with many methods, one of these methods is display:inline:

div.Box {
    width: 20%;
    height: 250px;
    background: red;
    display: inline-block;
}

#Container {
  text-align: center;
}

JSFiddle (this with percent width)

JSFiddle (this with px width)

div.Box {
    width: 200px;
    height: 250px;
    background: red;
    display: inline-block;
}

another method is make div.Box float: left; then give a fixed width to parent then add margin: auto for make it center.

JSFiddle

div.Box {
    width: 200px;
    height: 250px;
    background: red;
    float: left;
    margin: 0 5px 0 5px;
}

but if you want to make it responsive you should write some media query for other resolution.

相关阅读:
Top