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

Question

我正在设计，我想将其内容居中

.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;
}

和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>

但它没有正确居中该问题不会在大屏幕上显示，但在较小的屏幕上会显示得很糟糕，请参见图片：

Answer 1

将此应用于容器。

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

并删除。

margin: 0px auto; padding: 0px;

Answer 2

我想在小于 760 PX 的小屏幕中居中 3 列，其中正文宽度 770 PX 为例指定属性到像 {width: 850 px;} 和

这样的容器

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

但总的来说这是行不通的，因为指定的宽度比实际宽度大并超过了它，所以没有余量来自动调整它并使在 div 中找到的内容居中所以只需指定指定媒体查询的宽度

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

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

在大多数情况下，bootstrap 解决了这个问题，但在像这样的小情况下它坏了

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

Content not centered in properly way

html

css

margin

width

twitter-bootstrap