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

【问题标题】：Content not centered in properly way内容没有以正确的方式居中
【发布时间】：2015-03-19 01:41:42
【问题描述】：

我正在从事设计工作，我想将其内容居中

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

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

【问题讨论】：

提供 js fiddle 和代码示例，以便我们查看。
看起来您正在使用 Bootstrap。如果是这样，你正在混合所有东西，container_12 应该是容器，那么你可以简单地将.box-3 对齐到中心。另外，当你被要求添加代码时，请添加代码，而不是伪代码，帮助我们帮助你

标签： css html twitter-bootstrap width margin

【解决方案1】：

我想在小于 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;
}
    }

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

【讨论】：

【解决方案2】：

将此应用于容器。

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

然后删除。

边距：0px 自动；填充：0px;

【讨论】：