在引导响应网格上居中 div

Posted 2023-03-05

【中文标题】在引导响应网格上居中 div

【英文标题】：Centering Divs on Bootstrap Responsive Grid

【发布时间】：2017-04-21 15:36:04

【问题描述】：

我正在使用如下所示的引导网格，并且我正在尝试集中一些 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>

【参考方案1】：

实际上用 margin:0 auto; width:50% 它应该可以工作。

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

【讨论】：

先生，我想将内容集中在 col-sm-4 div 中。

Bootstrap 已经有了“.text-center”类（getbootstrap.com/css/#type-alignment），所以我看不出添加另一个“集中”类的理由。您甚至可以将其添加到“.col-sm-4” div 并删除内部

@RiccardoDeContardi 我认为它只适用于...文本。谢谢先生！

【参考方案2】：

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

.centralize 
    text-align: center;

【讨论】：

它没有。我想在 col-sm-4 div 中居中！

我在my answer here 中提出了相同或相似的建议。如果 OP 使用 Bootstrap 3.0.1 或更新版本（他们没有指定），你应该use the .center-block builtin instead

@RyanGee 谢谢先生。