Несмотря на то, что я нашел примеры размещения текста в одной строке с изображением, я хочу разместить значок с изображением ролловера в той же строке, что и текст, до и после него в ячейке CSS Grid.
Это тип кода, который у меня есть:
<div class="gridcell">
Click on this icon
<a href="main.html">
<img class="img-off" src="image-off.gif" />
<img class="img-on" src="image-on.gif" />
</a>
for the main menu
<div>
, где в моем коде я указываю размер изображения.
Тогда в моем CSS коде I иметь что-то вроде следующего:
.img-on {display:none;}
.img-off {display:block;}
a:hover .img-on {display:block;}
a:hover .img-off {display:none;}
Так, чтобы «Нажмите на этот значок [изображение] для главного меню» было показано в той же строке и центрировано в ячейке сетки с помощью CSS Сетка "оправдать себя: центр"; в заголовке файла HTML.
image-off.gif - это положительное изображение, когда мышь не находится над ним, а image-on - это отрицательное изображение, когда мышь находится над ним. Это работает без каких-либо проблем, и я могу центрировать изображение в ячейке, но что бы я ни делал, я не могу получить текст и изображение, чтобы они были на одной строке и центрированы в ячейке.
Изображение имеет размер значка, поэтому имеет высоту, не намного превышающую высоту текста, но независимо от того, что я пробовал, я просто не могу поместить текст по обе стороны от значка в аккуратную линию, поэтому будет намного Спасибо за помощь в решении этой проблемы.