Hey @motheraigaia, NP. Here’s a code template you can use:
Copy-paste this and replace the URL with your own:
<div style="width:100%; display:flex; justify-content:center;">
<img src="REPLACE_WITH_IMAGE_URL"
alt="Image"
style="display:block; max-width:100%; height:auto;">
</div>
[To center a single image]
Cool modifications to make your image embeds stand out:
Rounded corners + soft shadow
<img src="REPLACE_WITH_IMAGE_URL"
alt="Image"
style="display:block; max-width:100%; height:auto; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.12);">
Make the image clickable (opens large version in a new tab)
<div style="width:100%; display:flex; justify-content:center;">
<a href="REPLACE_WITH_LARGE_IMAGE_URL" target="_blank" rel="noopener">
<img src="REPLACE_WITH_IMAGE_URL"
alt="Image"
style="display:block; max-width:100%; height:auto;">
</a>
</div>
[If you don’t want it to open on click, just use the first snippet with no <a> tag.]
Two images side-by-side, centered
<div style="display:flex; justify-content:center; gap:16px; flex-wrap:wrap;">
<img src="URL_1" alt="Image 1" style="max-width:100%; height:auto; border-radius:12px;">
<img src="URL_2" alt="Image 2" style="max-width:100%; height:auto; border-radius:12px;">
</div>
Add a caption
<p style="text-align:center; font-size:14px; margin-top:8px;">
Short caption here
</p>
If anything still won’t center, paste your snippet and I’ll tweak it.
