内容没有以正确的方式集中

I'm working in a design and I want to center its content

我正在设计中,我希望将其内容集中在一起

.container_12 {
    position: relative;
    max-width: 960px;
    margin: 0px auto;
    padding: 0px;
}

.grid_3 {
    float: left;
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
    width: 300px;
}

and html as follows:

和HTML如下:

<div class="container_12">
     <div class="row">
         <div class="col-lg-4 col-md-4 col-sm-6 col-xs-6 col-xxs-12 grid_3 box-3">
             <h2> </h2>
             <img>
             <div class="inside">
                 <div></div><a></a>
             </div>
         </div>
             and 2 divs in same hierarchy


      </div> 
      </div>

but it didn't center properly the problem doesn't show in a large screen but in smaller screens it shows awfully, see image:

但它没有正确居中,问题没有在大屏幕上显示,但在较小的屏幕中显示得非常糟糕,请参阅图片:

2 个解决方案

#1

Apply this to the container.

将此应用于容器。

right: 0;
left: 0;
margin-right: auto;
margin-left: auto;

And remove.

margin: 0px auto; padding: 0px;

保证金:0px auto;填充:0px;

#2

i was wanted to center 3 column in small screen less than 760 PX where the body width 770 PX as example with specified property to container like that {width: 850 px;} with

我想在小于760 PX的小屏幕中居中3列,其中身体宽度为770 PX,例如具有指定属性的容器,如{width:850 px;} with

margin-right: auto;
margin-left: auto;

but in general this wouldn't work because of the specified width is bigger than the real one and exceed it so there's no margin to auto it and center the content which found in div so just specify the width for specified media query

但一般情况下这不起作用,因为指定的宽度大于实际宽度并超过它,所以没有余地来自动它并居中在div中找到的内容所以只需指定指定媒体查询的宽度

@media (max-width: 790px) {
  .container {

margin-right: auto;
margin-left: auto;
width: 660px;
}
    }

in most cases the bootstrap solve this problem but in a little cases like this it broken

在大多数情况下,引导程序解决了这个问题,但在这种情况下它会破坏