【问题标题】:Centering Divs on Bootstrap Responsive Grid在引导响应网格上居中 div
【发布时间】: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>

【问题讨论】:

    标签: html css twitter-bootstrap centering


    【解决方案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 谢谢先生。
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签