html - How would i slightly lower my image in my text?

Question

I have an image inserted in my table i created when you press a button, it displays the table, but i want the image in my text on the actual website to be slightly lower, how can i do that?

code:

     <div id="demo" style="display:none"><font color="white"><b>Fav Color:</b> Orange/Purple<br><b>Hobbies:</b> Coding, Video games, Hanging out with friends, Drifting<br><b>Fav Song:</b> Homocide - Logic (ft. Eminem)<br><b>Fav Animal:</b> Cat<br><b>Fav Food:</b> Pulled Pork Sandwich<br><b>My Fav Game:</b> Fortnite <img src="https://emoji.gg/assets/emoji/FortniteLogo.png" width="32px" height="32px"></font></div>

i would like the F logo to be slightly lower and more in line with the word Fortnite if you know what i mean

question from:https://stackoverflow.com/questions/65831109/how-would-i-slightly-lower-my-image-in-my-text

Answer 1

First of all, you should no longer use the <font> tag, as it is no longer part in HTML5, even though current browser may support it.

You should use paragraphs <p> instead and declare your font styles in the styles property. Look here for an example. https://www.w3schools.com/tags/tag_font.asp

If you change your code to the paragraphs it could look something like this:

<div id="demo" style="text-align: center; color: white;">
    <p>Fav Color:</p>
    <p>Hobbies:</p>
    <p>Fav Song:</p>
    <p>Fav Animal:</p>
    <p>Fav Food:</p>
    <p>My Fav Game: Fortnite <img style="position: relative; top: 5px;" src="https://emoji.gg/assets/emoji/FortniteLogo.png" width="32px" height="32px"></p>
</div>

The specific code you are looking for to bring the image down a bit:

<img style="position: relative; top: 5px;" ... />

If you want to center it according to the text, then you could do the following: <img style="position: relative; top: 50%; transform: translateY(-50%)" ... />

top: 50% will let the image start at the vertical-center from your text. While transform: translateY(-50%)will bring it back upwards by half the image height.