I am currently working on centering a row made up of four images along with their respective captions underneath. The code I am using is as follows:
<div class="clear" style="text-align: center;">
<div style="float: left; padding-right: 10px;">
<img>...</img>
<p>...</p>
</div>
<div style...
</div>
Unfortunately, the containers are not centered due to the floating property. I have come across a solution that seems promising:
style="display: inline-block;"
Excited by this discovery, I updated my code with this new style:
<div style="text-align: center;">
<div style="display: inline-block; vertical-align: top; padding-right: 10px">
<img>...</img>
<p>...</p>
</div>
</div>
After implementing this change, everything looked perfect in the preview. However, when I saved my post on the website's editor, the "display: inline-block;" part was inexplicably removed by some script running in the background.
Is there an alternative solution that I can explore? I would prefer not to resort to using a table as I am unsure of how well it will adapt to smaller screens like those on smartphones.