CODEWITHSUNDEEP
htmlcss
Mohamed
Mohamed

Reputation: 29

How to put a picture underneath another picture and centered?

I would like to know if anyone knew how to have the download button picture under the album cover for all 4 pictures, as seen below in the code & the picture:

<center>
    <img src="images/london-front-cover.jpg" alt="Londen front cover" width="200" height="200">
    <img src="images/london-volume.jpg" alt="Londen Volume (front cover)" width="200" height="200" border:none;>
    <img src="images/love-hate-volume.jpg" alt="Love Hate Volume (front cover)" width="200" height="200">
    <img src="images/gurbet-eli-volume.JPG" alt="Gurbet Eli Volume (front cover)" width="200" height="200">
    </br>
</center>
<a href="Londen-vol1.zip">
    <img src="images/downloadbutton.png" alt="downloadbutton" width="150" height="50">
</a>
</br>
</br>

Picture

Upvotes: 2

Views: 420

Answers (3)

Paulie_D
Paulie_D

Reputation: 115383

Firstly, <center> has been deprecated for a long time and should no longer be used. I'm surprised they're still teaching that.

Wrap each image and button in their own container and set the containers to display:inline-block.

The put all the containers in a master wrapper and apply text-align:center.

.wrapper {
  text-align: center;
}
.divWithBtn {
  display: inline-block;
  vertical-align: top;
}
.divWithBtn img,
.divWithBtn a {
  display: block;
  margin: 0 auto;
}
<div class="wrapper">
  <div class="divWithBtn">
    <img src="http://placehold.it/100x100" alt="">
    <a href="">download</a>
  </div>
  <div class="divWithBtn">
    <img src="http://placehold.it/100x100" alt="">
    <a href="">download</a>
  </div>
  <div class="divWithBtn">
    <img src="http://placehold.it/100x100" alt="">
    <a href="">download</a>
  </div>
  <div class="divWithBtn">
    <img src="http://placehold.it/100x100" alt="">
    <a href="">download</a>
  </div>
</div>

Upvotes: 0

herrh
herrh

Reputation: 1368

This should work. You can replace the anchor with an image or add an image inside the a tag.

.clearfix {
  clear: both;
}
.divWithBtn {
  float: left;
  text-align: center;
}
.divWithBtn img,
.divWithBtn a{
  display: block;
  margin: 0 auto;
}
<div class="clearfix">
<div class="divWithBtn">
<img src="http://placehold.it/100x100" alt="">
<a href="">download</a>
</div>
<div class="divWithBtn">
<img src="http://placehold.it/100x100" alt="">
<a href="">download</a>
</div>
<div class="divWithBtn">
<img src="http://placehold.it/100x100" alt="">
<a href="">download</a>
</div>
<div class="divWithBtn">
<img src="http://placehold.it/100x100" alt="">
<a href="">download</a>
</div>
</div>

Upvotes: 1

LOTUSMS
LOTUSMS

Reputation: 10290

First I want to suggest you to learn the basics of a responsive css framework such as Bootstrap. You will get a lot of these kinks worked out when you use the right classes that are available to you. But even without bootstrap, learn the use of text-align:center; float:left; display:block. The combination of these will help you along your way.

Nonetheless, here is a working DEMO for ya

Upvotes: 0

Related Questions