CODEWITHSUNDEEP
htmlcss
Dennis Slot
Dennis Slot

Reputation: 11

How to make multiple images center horizontal and responsive using div?

How do I make a line of images within a div responsive? My aim is to have a line of images (centered on the webpage) which scales, depending of the size of the screen. The (2) solutions I have untill now are like this, but not good enough. I try to:

I'm not a master of programming, so....

Thanks in advance,

Dennis

<div style="width: 100%; clear: center;">
<div style="text-align: center;"><a class="hoverborder" href="" rel="alternate"><img class="img-rounded" src="http://placehold.it/150x150" alt="" width="100" height="70" /></a>  

      

<div style="float: left; text-align: center;"><a class="hoverborder" href="index.php?Itemid=319" rel="alternate"><img class="img-rounded" src="http://placehold.it/150x150" alt="" width="100" height="70" /></a></div>
<div style="float: left; text-align: center;"><a class="hoverborder" href="index.php?Itemid=318" rel="alternate"><img class="img-rounded" src="http://placehold.it/150x150" alt="" /></a></div>
<div style="float: left; text-align: center;"><a class="hoverborder" href="index.php?Itemid=321" rel="alternate"><img class="img-rounded" src="http://placehold.it/150x150" alt="" /></a></div>
<div style="float: left; text-align: center;"><a class="hoverborder" href="index.php?Itemid=322" rel="alternate"><img class="img-rounded" src="http://placehold.it/150x150" alt="" /></a></div>

Upvotes: 1

Views: 2551

Answers (1)

isherwood
isherwood

Reputation: 61056

There are lots of ways to accomplish this. They somewhat depend on what's around the images in the page. I tend to avoid floats because they create other challenges and simply aren't necessary.

.image-row {
    text-align: center;
}
.image-box {
    width: 20%;
    padding: 1%;
    margin: .5%;
    background: pink;
    display: inline-block;
    font-size: 0; /* fixes bottom padding */
}
.image-box img {
    max-width: 100%;
}
<div class="image-row">
    <div class="image-box">
        <img src="http://placehold.it/500x500" />
    </div>
    <div class="image-box">
        <img src="http://placehold.it/800x500" />
    </div>
    <div class="image-box">
        <img src="http://placehold.it/500x500" />
    </div>
    <div class="image-box">
        <img src="http://placehold.it/500x200" />
    </div>
</div>

Fiddle demo

Upvotes: 4

Related Questions