这是我的 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;它没有用。
谁能帮帮我?提前致谢。
最佳答案
选项 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>
干杯!
关于html - 如何在CSS中对齐图像和下载按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28337238/