Hello everyone,
Thank you Chris for providing a solution to centering in the unknown
I was trying to mix Chris’s solution with a floating elements inside the container so that i can have certain content (e.g. Image) position in left / right by simply switching classes only but i couldn’t get the content centered within the container.
Code link (JSfiddle)
The reason why i have to float the image wrapper was because i’m trying to keep this as simple / reusable as possible rather than having two different HTML structure. I know one of another solution was having a different HTML structure by swapping the order of content and images wrapper and use display: table-cell but it doesn’t seems to be working well, especially on a mobile view the image needs to be sitting on top of the content.
Thank you for your attention and any feedbacks are welcome.
Danny