css - 如何使用 Bootstrap 将不均匀列中的图像居中？

Question

如何将列数不均匀的一行图像居中，例如，当我使用以下代码时(我需要让图像彼此相邻，这就是为什么我有 .no-padding 类):

<div class="container">
    <div class="row">
        <div class="col-md-3 no-padding">
            <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="" />    
        </div>
        <div class="col-md-3 no-padding">
            <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="" />    
        </div>
        <div class="col-md-3 no-padding">
            <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="" />    
        </div>
    </div>
</div>

CODEPEN DEMO

Answer 1

查找 codepen Demo

.no-padding {
    padding: 0;
}
.col-md-3{
    float:none;
    display:inline-block;
    margin:0 -2px;
    padding:0;
}
.tac{
    text-align:center;
}

HTML:

<div class="container">
    <div class="row tac">
        <div class="col-md-3 no-padding">
            <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="" />    
        </div>
        <div class="col-md-3 no-padding">
            <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="" />    
        </div>
        <div class="col-md-3 no-padding">
            <img class="img-responsive" src="http://lorempixel.com/400/200/" alt="" />    
        </div>
    </div>
</div>