Question

我正在使用bootstrap3并且包含包含背景图像的DIV。这些DIV位于列中，我想将它们居中。

我有以下HTML：

<div id="badges">


            <div class="col-xs-6  col-sm-6   col-md-2 col-lg-2 badge-container center-block">               
                <div id="badge1" class="center-block"></div>
            </div>


            <div class="col-xs-6  col-sm-6   col-md-2 col-lg-2 badge-container center-block">   
                <div id="badge2" class="center-block"></div>
            </div>


            <div class="col-xs-6  col-sm-6   col-md-2 col-lg-2 badge-container center-block">   
                <div id="badge3" class="center-block"></div>
            </div>


            <div class="col-xs-6  col-sm-6   col-md-2 col-lg-2 badge-container center-block">   
                <div id="badge4" class="center-block"></div>
            </div>


 </div>

我的每个DIV都有一个背景img（这是我在LESS的代码）

#badges{


    .badge-container{


        height: 5em;


        #badge1{
            height:100%;
            width: auto;

            background-image: url("images/badge1.JPG");
            background-size: contain;
            background-repeat: no-repeat;                           
        }


        #badge2{
            height:100%;
            width: auto;

            background-image: url("images/badge2.JPG");
            background-size: contain;
            background-repeat: no-repeat;           
        }



        #badge3{
            height:100%;
            width: auto;

            background-image: url("images/badge3.PNG");
            background-size: contain;
            background-repeat: no-repeat;           
        }   


        #badge4{
            height:100%;
            width: auto;

            background-image: url("images/badge4.JPG");
            background-size: contain;
            background-repeat: no-repeat;           
        }    

    }


}

我试图让div居中（也添加了class =“center-block”，但它不起作用。

如何让这些DIV居中？

由于

Answer 1

以下是我认为您想要的 Codepen http://codepen.io/noobskie/pen/ojgrJX?editors=110

bootstrap有一个名为margin:0的类，如果你的列不等于一个完整的网格大小，你可以使用它

您可以使用的替代方法是旧的float:none;自动方式，并将"center-block"添加到自定义类

在此更详细地解释Center a column using Twitter Bootstrap 3

编辑删除了多余的{{1}}类

Answer 2

float:none;
margin:0 auto;

对于每个想要居中的div 不要忘记根据图像宽度给出div的特定宽度

如何在bootstrap col中使用backround将DIV居中？

2 个答案: