我想将图片与其旁边的文字对齐。目前,图像是我想要的位置,在中间,然而文本" Back To Top"看起来比图像低很多。理想情况下,我希望文本向上移动并与图像对齐。我已经尝试将这两个元素包装在单独的div和一个类中,但似乎没有任何工作。
我已经包含以下代码:
<h3 class='copyright'>© 2015 - 2016 Blankesque . All rights reserved . <a href='http://www.blankesque.com/p/policies.html'>Policies</a>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script>
jQuery(document).ready(function() {
var offset = 300;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.backtotop').fadeIn(duration);
} else {
jQuery('.backtotop').fadeOut(duration);
}
});
jQuery('.backtotop').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
<a class='backtotop' href='#'>Back To Top<img height='25px' src='http://i1379.photobucket.com/albums/ah140/mynamesiram/Mobile%20Uploads/C7FFCDAA-9694-451B-89B4-3B0BF8FC8BE9_zpsi7rqccwe.gif' width='25px'/></a>
</h3><div><br/></div><div><br/></div>
我的博客网址如下:http://www.blankesque.com
答案 0 :(得分:0)
您可以采取多种方法。
如果您不需要支持IE8 / IE9,则可以使用flexbox,并提供.backtotop
类CSS规则display: flex
和align-content: center
以及他们应该齐心协力。
您还可以将链接文字放在<span>
标记中,并为span
标记display: inline-block
和vertical-align:top
的CSS属性。