Как выровнять текст и изображения внутри элемента H3

Я хотел бы выровнять изображение и текст, который появляется рядом с ним. В настоящее время изображение - это то, где я бы хотел, посередине, однако текст «Back To Top» выглядит намного ниже, чем изображение. В идеале я хотел бы, чтобы текст был перемещен вверх и совпадал с изображением. Я попытался объединить два элемента в отдельные div и классы, но ничего не работает.Как выровнять текст и изображения внутри элемента H3

Я включил код ниже:

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

Мой блог URL выглядит следующим образом: http://www.blankesque.com

источник

2016-01-08 Jessica

Создайте идентификатор div для текста и сделайте его с CSS, выровненным в верхней части изображения. – ctabuyo

У вас на самом деле 'jQuery (' .backtotop ')' в вашем коде или вы хотели написать 'jQuery ('. Backtotop')'? – j08691

Да, у меня есть jquery ('. Backtotop') в моем коде, но по какой-либо причине он скопировал здесь неправильно. – Jessica

Есть несколько подходов, которые можно предпринять.

Если вам не нужна поддержка IE8/IE9, вы можете использовать flexbox и дать .backtotop правила класса CSS из display: flex и align-content: center, и они должны выровнять вверх.

Вы также можете поместить текст ссылки в <span> тега и дать что span тег CSS свойства display: inline-block и vertical-align:top.

источник

2016-01-08 21:04:20 litel

И используйте линейную высоту для дальнейшей настройки –

Как выровнять текст и изображения внутри элемента H3

ответ

Смежные вопросы