Centering boxes inside a div (image+text) - html

Question

I'd like to center three boxes like this: https://drive.google.com/file/d/0B4gPO2Q50KsZcGxrbGEySFV5eU0/view?usp=sharing
What I want to achieve is to show the boxes one over the another in mobile devices but I do not know how to do so.
I am using this code:
div#alex_box {
border: solid 1px #aaa;
overflow: hidden;
}
div.img_home {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img_home img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img_home a:hover img {
border: 1px solid #0000ff;
}
div.img_desc_home {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
<div id="alex_box">
<div class="img_home">
<a target="_blank" href=""><img src="http://dev.lifeonbikes.com/wp-content/uploads/2015/01/depositphotos_18467679-Travel-car-illustration.jpg" alt="primera imagen"></a>
<div class="img_desc_home">Texto primera imagen</div>
</div>
<div class="img_home">
<a target="_blank" href=""><img src="http://dev.lifeonbikes.com/wp-content/uploads/2015/01/images.jpg" alt="segunda imagen"></a>
<div class="img_desc_home">Texto segunda imagen</div>
</div>
<div class="img_home">
<a target="_blank" href=""><img src="http://dev.lifeonbikes.com/wp-content/uploads/2015/01/bus-icon120413.png" alt="tercera imagen"></a>
<div class="img_desc_home">Texto tercera imagen</div>
</div>
</div>

Answer 1

Try this zoom out and in to see the change Fiddle
#media screen and (max-width: 2000px) and (min-width: 300px){
img {
height:100px;
}
div#alex_box {
border: solid 1px #aaa;
overflow: hidden;
}
div.img_home {
margin: 5px;
padding: 5px;
border: 1px solid #0000ff;
height: auto;
width: auto;
float: left;
text-align: center;
}
div.img_home img {
display: inline;
margin: 5px;
border: 1px solid #ffffff;
}
div.img_home a:hover img {
border: 1px solid #0000ff;
}
div.img_desc_home {
text-align: center;
font-weight: normal;
width: 120px;
margin: 5px;
}
}
<div id="container">
<div id="alex_box">
<div class="img_home"> <a target="_blank" href=""><img src="http://dev.lifeonbikes.com/wp-content/uploads/2015/01/depositphotos_18467679-Travel-car-illustration.jpg" alt="primera imagen"></a>
<div class="img_desc_home">Texto primera imagen</div>
</div>
<div class="img_home"> <a target="_blank" href=""><img src="http://dev.lifeonbikes.com/wp-content/uploads/2015/01/images.jpg" alt="segunda imagen"></a>
<div class="img_desc_home">Texto segunda imagen</div>
</div>
<div class="img_home"> <a target="_blank" href=""><img src="http://dev.lifeonbikes.com/wp-content/uploads/2015/01/bus-icon120413.png" alt="tercera imagen"></a>
<div class="img_desc_home">Texto tercera imagen</div>
</div>
</div>
</div>

Answer 2

You can achieve it using margin-left: auto;margin-right: auto; within your parent div :
div#alex_box {
border: solid 1px #aaa;
margin-left: auto;
margin-right: auto;
overflow: hidden;
padding:10px;
display:table;
}
I also added display:table; to the parent div and display:table-cell; for each child div, and it works fine and it's responsive too.
This is the working Fiddle.
EDIT:
To separate boxes with spaces you just need to add margin:5px; to their CSS: Take a look at this Fiddle.