div内的居中框（图片+文字）

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 .