html - 如何在CSS中对齐图像和下载按钮？

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> 中[ block 元素]

  <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到包含您的按钮的 anchor 标记[内联 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>
  

干杯!