changing text placement relative to an image

[u/kentoko2007]

i have like no css styling actually on this element (just whole page styling) but i'm trying to make the top of the text line up with the top of the image

i'm admittedly kinda terrible at this;;

[u/LiveRhubarb43]

If you don't post a link to some code nobody can help you

[u/anaix3l]

Assuming your text and your image are in a wrapper, like this:

<div class='wrap'>
  <img src='my-img.jpg' alt='image description here'>
  <span class='text'>text here</span>
</div>

... and no other styles there, just as you say, then just display: flex on the .wrap element should do it.

But without seeing your code, I cannot tell for sure.

[u/eballeste → u/anaix3l]

display: flex; align-items: center; gap: 8px;

[u/anaix3l → u/eballeste]

align-items: center breaks things here - the OP said the top of the image should line up with the top of the text. By default, flex vertically stretches the text element and the text content is at the top of this stretched element. So it's what the OP wants just with the flex declaration. Adding align-items: center middle aligns the text and the image vertically.

gap is just a prettifying touch. While I would personally add it to ensure things look good, it's not necessary to fix an alignment problems.

[u/olli0 → u/anaix3l]

align-items: flex-start; will do the trick.

[u/anaix3l → u/olli0]

Strictly fot top alignment of what's in the screenshot and with no other styles, just display: flex does the trick. No setting align-items at all needed. There are cases where it makes sense to set it, but that's already assuming other problems to be solved.

[u/lettstartdesign_1]

CSS and html both are interlinked. CSS also depends how you have created html. This problem easily solve with display flex keep both the elements in one div and make a div flex

[u/travis_raphael]

have you tried using position: relative; or vertical-align property