horizontally center multiple divs within a div in small devices (xs) - html

Question

My page has 3 div(s) within a div. In tablet and desktop screens they look good (center-aligned), but on a very small device such as cellphone the inner div(s) are left aligned (I want them to be horizontally center aligned). I applied text-center, and center-block to the outer div but it does not work. Any suggestion? Here are the html, and css codes.
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
portfolio-caption {
max-width: 281px;
background-color: #994ACC;
text-align: center;
padding: 10px;
border-top: 3px solid #ffffff;
margin-bottom: 10px;
}
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div style="max-width: 281px">
<a href="#" ">
<img src="./x/pilotproject1.jpg " class="img-responsive " style="margin: 0 auto; " alt=" ">
</a>
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 ">
<div style="max-width: 281px ">
<a href="# ">
<img src="./x/pilotproject2.jpg " class="img-responsive "
style="margin: 0 auto; " alt=" ">
</a>
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 ">
<div style="max-width: 281px ">
<a href="# " class="pilot-link ">
<img src="./x/pilotproject3.jpg " class="img-responsive "
style="margin: 0 auto; " alt=" ">
</a>
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
</div>
The reason that I have is that the width of the pictures is 281 px, if I do not set the width, the width of the div that comes after the img will be bigger than 281 px which is not something that I want.
as you can see in this picture, the images are all left-aligned

Answer 1

I added a class centered as a container to center elements (please remove the border border: 1px solid red; it is used to show you the container block ):
.centered {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border: 1px solid red;
}
.img-responsive {
display: block;
max-width: 281px !important;
height: auto;
margin: 0 auto;
}
wrap each element you want to be centered.
Also in your css portfolio-caption should be .portfolio-caption to select a class.
I moved your in-line style to css class img-responsive so you can update your style in one place.
.img-responsive {
display: block;
max-width: 281px !important;
height: auto;
margin: 0 auto;
}
.portfolio-caption {
width: 281px;
background-color: #994ACC;
text-align: center;
padding: 10px;
border-top: 3px solid #ffffff;
margin-bottom: 10px;
float: right;
}
.centered {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
/* border: 1px solid red; */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="centered">
<a href="#">
<img src="http://placehold.it/350x150" class="img-responsive" alt=" ">
</a>
</div>
<div class="centered">
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="centered">
<a href="# ">
<img src="http://placehold.it/350x150" class="img-responsive" alt=" ">
</a>
</div>
<div class="centered">
<div class="portfolio-caption">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="centered">
<a href="# " class="pilot-link ">
<img src="http://placehold.it/350x150" class="img-responsive" alt=" ">
</a>
</div>
<div class="centered">
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
</div>

Answer 2

You should not apply classes to outer divs, apply them exactly to what you want to be centered : class="img-responsive center-block", and
also check the bootstrap version center-block is new in Bootstrap version 3.0.1 i believe.

Answer 3

Use
Text align : center ;
text-align:center
<div style="max-width: 281px; text-align : center">
Plunker link :
https://plnkr.co/edit/UaW436KiylzfqOCU1cg1?p=preview