css - Centering the image in Bootstrap -
i m using bootstrap 3.0 creating website. new bootstrap. want, want image in center of div when browser size small have code.
<div class="col-lg-10 ccol-lg-offset-1 col-md-12 col-sm-12 "> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"> <img src="images/2.png" class="img-responsive" /> <p class="text-center"><a href="javascript:void(0);">taj group</a></p> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"> <img src="images/2.png" class="img-responsive" /> <p class="text-center"><a href="javascript:void(0);">taj group</a></p> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"> <img src="images/2.png" class="img-responsive" /> <p class="text-center"><a href="javascript:void(0);">taj group</a></p> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"> <img src="images/2.png" class="img-responsive" /> <p class="text-center"><a href="javascript:void(0);">taj group</a></p> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"> <img src="images/2.png" class="img-responsive" /> <p class="text-center"><a href="javascript:void(0);">taj group</a></p> </div> <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"> <img src="images/2.png" class="img-responsive" /> <p class="text-center"><a href="javascript:void(0);">taj group</a></p> </div>
update 2017
bootstrap 2.x
you create new css class such as:
.img-center {margin:0 auto;}
and then, add each img:
<img src="images/2.png" class="img-responsive img-center">
or, override .img-responsive
if you're going center images..
.img-responsive {margin:0 auto;}
demo: http://bootply.com/86123
bootstrap 3.x
edit - release of bootstrap 3.0.1, center-block
class can used without additional css..
<img src="images/2.png" class="img-responsive center-block">
bootstrap 4
in bootstrap 4 alpha 6, mx-auto
class (auto x-axis margins) can used center images.
Comments
Post a Comment