Text and image aligned!

That one comes close. But the image hangs on the end of the second line, not vertically centred as the OP intended.
The media query method seems to work as intended, but the query width is a magic number. Changing the width units from px to em will make it more robust against text zooming, but it is still bound to the text length, so still a magic number.

If there were some property that could alter this default…

2 Likes

I haven’t had this problem before, so my eyes are fresh. :smiley:

Hopefully I now avoid the image to break line until it is finally tuched by the shrinking container.

I decided to rely on the older algorithms for pure inline boxes. Inline boxes still acceept horizontal padding and margin. I moved the image by a neg margin on the H1 well into the H1 to not trigger a line-breake ubtil the image is tuched by the narrowing width. I then move the image back to its original position at the end of the line.

The 30px image including eventual woed-space is well covered by the 40px negative margin. Then to restore the missing H1 content width I applied a 40px right padding on the container.

Play with the live code: https://jsfiddle.net/Erik_J/Lt50npjv/

I’ve tested the code on Firefox, Opera, Vivaldi, Brave, Chromium and finally the PaleMoon. Not all browsers are latest versions, they just happen to be on this machine.

The untuched HTML:

<div class="wrapper">
  <h1>Welcome George!</h1>
  <img src="https://w7.pngwing.com/pngs/545/285/png-transparent-cartoon-sadness-illustration-say-hello-words-phrases-boy-god-sai-baba.png" alt="">
</div>

Old time CSS:

.wrapper {
  padding-right: 40px; /* fill the neg margin */
  text-align: center;
}
h1 {
  display: inline;
  margin-right: -40px; /* pull in the full image */
  vertical-align: middle;
}
img {
  position: relative;
  left: 40px; /* move the image back */
  width: 30px;
  vertical-align: middle;
}
  /* the 40px length is safely more than the image width including word space */
2 Likes

@nikostzounakos
How were you able to insert codepen into your post ?

I was hoping for a solution to the problem I mentioned in the two column format as I didn’t really see a problem with just letting the icon hang on the end of the last word :). (Apart from a little trickery of course to stop it breaking on its own ).

However looking at tree OPs original picture it may be what was wanted after all. I was assuming the icon should be vertically aligned to both lines of text at the furthest edge of the longest text as per my media query demo.

Yes this is perfect as a solution :slight_smile: :slight_smile:

Really hard for me to figure it out.

Yes the solution would be the image to follow the last word, so this is really good.

Thanks!!!

2 Likes

Off Topic:

You just post the link.

However, I believe it does not work with anonymous pens.

2 Likes

I’ll keep it in mind,.

Please don’t hold your breath, wonders can take some time. :slight_smile:

1 Like

I was actually hoping that you’d drop in as you always have a new slant on problems :slight_smile:

1 Like

Not always I’m afraid.

And if it was made a challenge you would find a solution in no time. :joy: :

2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.