How to align image and download button in css? - html

Question

Here is my jsfiddle: http://jsfiddle.net/4478bs0L/
I need to place download button underneath of image at left side.
For that, here is my html:
<div><img src="9780143332497.jpg" alt="">
<a href="9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a></div>
If i add caption class to the button and set text-align:center; it didn't working.
Can anyone please help me? Thanks in advance.

Answer 1

Option1: Add a <br/> between both images.[Apparently, your button is also an image]. Sometimes the simplest answer is the easiest.
<img src="image1" alt="">
<br/>
<a href="image2" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a>
Option 2: enclose your button inside a <div> [ block element]
<div>
<a href="http://s30.postimg.org/b7rdjjkwh/9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" style="display:block"alt="Download"/>
</a>
</div>
Option 3: add inline css property display:block to the anchor tag containing your button[inline css would override the myButton class property which is making it appear on the same line]
<a href="http://s30.postimg.org/b7rdjjkwh/9780143332497.jpg" class="myButton" style="display:block;width:60px" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a>
Cheers!!

Answer 2

just use a <br> after the image and before the button
<div><img src="9780143332497.jpg" alt="">
<br>
<a href="9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a></div>
FIDDLE DEMO

Answer 3

Yes I did it .... implement this code...
<div class="wrap">
<div class="london-olympic">
<h1>Playng To Win</h1>
<span class="span">Author: Saina Nehwal.</span>
<!-- Go to www.addthis.com/dashboard to customize your tools -->
<div class="addthis_jumbo_share"></div>
<div><img src="http://s30.postimg.org/b7rdjjkwh/9780143332497.jpg" alt="">
<a style="position:absolute; margin-left: -140px; top: 450px;" href="http://s30.postimg.org/b7rdjjkwh/9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a>
</div>
<Br><br>
<p>. . . being a player from India defines who I am. When I play, it's for my parents, my coach, and my country.'</p>
<p>Meet Saina Nehwal-India's star badminton player and World Number 4, Padma Shri and Khel Ratna awardee, the girl who brought laurels to India by winning an Olympic medal at the age of twenty-two. In this fascinating memoir, she talks about her childhood and growing-up years; her relationship with the most important people in her life; the ups and downs of her celebrated career, from district level wins to the Olympics; and the sacrifices needed to succeed in any sport. She also reveals little-known facts and offers a peek into her many avatars-daughter, sister, student, and the regular girl behind the badminton prodigy.</p>
<p>Find out what a typical day in Saina's life is like-rigorous training, a strict diet, and no parties or sleepovers. But it's not all work and no play; Saina loves to shop, eat ice cream (post wins only), and play games on her iPad!</p>
<p>With candid photographs and badminton tips from the pro herself, this book showcases the making of a badminton champ-in her own words.</p>
</div>
</div>

Answer 4

Use this code
<div>
<img src="9780143332497.jpg" alt="">
</div>
<div>
<a href="9780143332497.jpg" class="myButton" download="ss" title="Download">
<img src="/path/to/image" alt="Download">
</a>
</div>