Text and image aligned!

[SamA74]

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.

@PaulOB

the specs make it clear that the container is laid out but then doesn’t keep checking on its width when text inside starts to wrap

If there were some property that could alter this default…

[Erik_J]

@PaulOB

I was hoping that some of the new css properties like min and max-content and their variations would suffice (or indeed CSS grid) but the specs make it clear that the container is laid out but then doesn’t keep checking on its width when text inside starts to wrap. Which of course for most layouts is what you want but this edge case has been eluding me for years

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

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 */

[vmars316]

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

[wojciechlisik]

[PaulOB]

@Erik_J

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

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.

[nikostzounakos]

Yes this is perfect as a solution

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

[TechnoBear]

Off Topic:

@vmars316

How were you able to insert codepen into your post ?

You just post the link.

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

[Erik_J]

@PaulOB

I was hoping for a solution to the problem I mentioned in the two column format

I’ll keep it in mind,.

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

[PaulOB]

@Erik_J

I’ll keep it in mind,.

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

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

[Erik_J]

@PaulOB

as you always have a new slant on problems

Not always I’m afraid.

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