如何在 H3 元素中对齐文本和图像答案

【问题标题】：How To Align Text And Images Within A H3 Element如何在 H3 元素中对齐文本和图像
【发布时间】：2016-04-13 15:41:50
【问题描述】：

我想对齐图像和旁边显示的文本。目前，图像是我想要的位置，在中间，但是文本“Back To Top”看起来比图像低得多。理想情况下，我希望文本向上移动并与图像对齐。我尝试将这两个元素包装在单独的 div 和一个类中，但似乎没有任何效果。

我已包含以下代码：

<h3 class='copyright'>&#169;  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() &gt; offset) {
jQuery(&#39;.backtotop&#39;).fadeIn(duration);
} else {
jQuery(&#39;.backtotop&#39;).fadeOut(duration);
}
});

jQuery(&#39;.backtotop&#39;).click(function(event) {
event.preventDefault();
jQuery(&#39;html, body&#39;).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

【问题讨论】：

为文本创建一个 div id 并使其与 CSS 对齐在图像的顶部。
你的代码中真的有jQuery(&#39;.backtotop&#39;)，还是你的意思是写jQuery('.backtotop')？
是的，我的代码中有 jquery('.backtotop') 但是无论出于何种原因，它在这里复制不正确。

标签： jquery html css vertical-alignment blogger

【解决方案1】：

您可以采取多种方法。

如果不需要支持IE8/IE9，可以使用flexbox，并给出display: flex和align-content: center的.backtotop类CSS规则，它们应该对齐。

您还可以将链接文本放在<span> 标记中，并赋予span 标记display: inline-block 和vertical-align:top 的CSS 属性。

【讨论】：

并使用 line-height 进一步调整