0

I am hoping for a pure CSS solution for this:

I have text with <img> elements. These images can be either in a row by themselves OR embedded in the midst of the text rows. Images that are on their own rows should center to the middle. But the mid text images should stay just as they are, with the text just to the left/right of it.

For automation purposes the two cases must have the same css styling. The text must not be styled in any way nor wrapped in any element. Example:

In the middle <img src="tiny_ant.jpg"> of the text. Whereas the following is

                       <img src="huge_elephant.jpg">

centered on its own row.

How can this be styled to happen?

Thank you!

twMat
  • 11
  • 1
  • 2
    Would you mind to share the code? – Adriano Mar 08 '21 at 22:31
  • Is it clearer now? Thank you for your input. – twMat Mar 08 '21 at 23:00
  • From the code you shared the answer is: you cannot do what you are asking. The only way you will be able to do it is to assign different classes to the two images, so that the one surrounded by text will be `display: inline;` and the other one alone in a single line will have `margin: 0 auto;`. – Adriano Mar 08 '21 at 23:15
  • It can't be done without DOM change, see an old question here, https://stackoverflow.com/questions/17994806/css-element-child-vs-child-with-text-node – lastr2d2 Mar 08 '21 at 23:21
  • @Adriano - I appreciate your answer very much, thank you. – twMat Mar 08 '21 at 23:24
  • @lastr2d2 - I appreciate your answer very much, thank you. – twMat Mar 08 '21 at 23:25

0 Answers0