在 Bootstrap 响应式网格上居中 Div

Question

我正在使用 bootstrap 网格，如下所示，我正在尝试集中一些 div。（pic）。我什么都试过了 {margin:0 auto; width:50% } 等等，但我无法解决。集中一些 div 并不难。这里有什么问题？请不要将其标记为重复。我整天都在研究，我就是无法解决。谢谢

<header data-spy="affix" id="myHeader" class="container row">
            <div class="col-sm-4 ">
                <div class="centralize">
                        <a href="http://www.facebook.com" target="_blank">
                        <img class="logos" src="images/facebook.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
                        </a>    

                        <a href="http://www.twitter.com" target="_blank">
                        <img class="logos" src="images/twitter.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
                        </a>    

                        <a href="http://www.instagram.com" target="_blank">
                        <img class="logos" src="images/instagram.png" onmouseover="zoomin(this.id)" onmouseout="zoomout(this.id)">
                        </a>

                </div>
            </div>  
            <div class="col-sm-4">
                <div class="centralize">
                        //Other Stuff to be centralized 
                </div>
            </div>                  
            <div class="col-sm-4">
                <div class="centralize">
                        //Other Stuff to be centralized 
                </div>
            </div>          
    </header>

Answer 1

实际上是 {margin:0 auto; width:50%} 它应该有效。

但在您的代码中，我看到您在父级 div 上使用 .col-sm-4 class，它只占宽度的 1/3。它可能与 .col-sm-12 一起使用，而不是需要 100%

Answer 2

要使 class="centralize" div 中的内容居中对齐，请使用：

.centralize {
    text-align: center;
}

在 Bootstrap 响应式网格上居中 Div

Centering Divs on Bootstrap Responsive Grid

html

css

centering

twitter-bootstrap