Question

这是我的jsfiddle：http://jsfiddle.net/4478bs0L/

我需要在左侧的图像下方放置下载按钮。

为此，这是我的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>

如果我在按钮中添加标题类并设置text-align：center;它没有工作。

任何人都可以帮助我吗？提前谢谢。

Answer 1

选项1 ：在两张图片之间添加<br/>。[显然，您的按钮也是图片]。有时最简单的答案是最简单的。

<img src="image1" alt=""> 
<br/>
<a href="image2" class="myButton" download="ss" title="Download">
  <img src="/path/to/image" alt="Download">
</a>

选项2 ：将您的按钮括在<div> [块元素]

中

<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>

选项3 ：将内嵌 css属性display:block添加到包含按钮的锚标记中[内联css会覆盖myButton使它出现在同一行的类属性]

<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>

干杯!!

Answer 2

只需在图片后面和按钮

之前使用<br>

<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

是的，我做到了......实施此代码......

＆＃13;

<div class="wrap">
<div class="london-olympic">
<h1>Playng To Win</h1>
<span class="span">Author: <a href="#">Saina Nehwal.</a></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>

＆＃13;

Answer 4

使用此代码

 <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>

如何在css中对齐图像和下载按钮？

4 个答案: