0

I am trying to position symbols (the images) underneath of certain words in the line above. What would be the best way to do this? It is a grammatical example, so it is very important the images/symbols do not move around in different screen sizes.

HTML:

Præsens:<i> Susanne take<b>s</b> you down to her place near the river.</i><br>
<img src="https://i.ibb.co/7RsB2B8/subjekt.png" style="width:25px;height:25px;" />   <img src="https://i.ibb.co/QbYvTrY/verballed.png" style="width:25px;height:25px;" />

Here is a JSfiddle: https://jsfiddle.net/kmfd45gh/

Dimitris Papazacharias
  • 661
  • 1
  • 7
  • 21
micks88
  • 57
  • 1
  • 10
  • Do you mean you want the symbols under some specified words? If yes, which are these words? Or do you just want the symbols one under another, under the sentence? Otherwise the code looks fine. – Dimitris Papazacharias Jan 27 '20 at 15:41
  • Yes I want them to be placed under specific words. Like the subject of the sentence (first image file) is 'Susanne' and the next image, the verb, should be placed under 'takes'. – micks88 Jan 27 '20 at 15:47

1 Answers1

1

I think that absolute positioning is the only choice:

<div style="position:relative;">
  Præsens:<i> Susanne take<b>s</b> you down to her place near the river.</i><br>
  <img src="https://i.ibb.co/7RsB2B8/subjekt.png"
    style="width:25px;height:25px; position: absolute; left:80px;"/>   
  <img src="https://i.ibb.co/QbYvTrY/verballed.png"
    style="width:25px;height:25px; position:absolute; left:120px;"/>
</div>

Finalize the 'left' pixels of each img element by trial and error

Dimitris Papazacharias
  • 661
  • 1
  • 7
  • 21
  • Thanks, I should probably try in percentage if I want it to be somewhat responsive. There has to be a better way though. – micks88 Jan 27 '20 at 17:06