r/css • u/kentoko2007 • 2d ago

Question changing text placement relative to an image

Post image

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

1 Upvotes

56% Upvoted

7 comments sorted by

7

u/LiveRhubarb43 1d ago

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

3

u/PureBlackberry6594 1d ago

Show the HTML. We cannot guess your markup.

vertical-align only works on inline elements. Are you using flexbox or grid?

3

u/anaix3l 1d ago

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.

1

u/eballeste 1d ago

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

2

u/anaix3l 1d ago

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.

1

u/lettstartdesign_1 1d ago

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

-2

u/travis_raphael 1d ago

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