I am making a site that publishes articles in issues each month. It is straightforward, and I think using a Markdown editor (like the WMD one here in Stack Overflow) would be perfect.
However, they do need the ability to have images right-aligned in a given paragraph.
I can't see a way to do that with the current system - is it possible?
You can embed HTML in Markdown, so you can do something like this:
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
<div style="float:left;margin:0 10px 10px 0" markdown="1">
</div>
The attribute markdown possibility inside Markdown.
I had the same task, and I aligned my images to the right by adding this:
<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>
For aligning your image to the left or center, replace
<div style="text-align: right">
with
<div style="text-align: center">
<div style="text-align: left">
You can directly use align property:
<img align="right" width="100" height="100" src="https://images.unsplash.com/photo-1650620109005-099c2de720f8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxM3x8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60">The best and most customizable option:
<div style="display:flex; align-items: center;">
<div style="flex:1">
<img src="https://www.researchgate.net/profile/Jinsong-Chong/publication/233165295/figure/fig5/AS:667635838640135@1536188196882/Initial-contour-Figure-9-Detection-result-in-low-resolution-image-in-low-resolution-image.ppm"/>
</div>
<div style="flex:1;padding-left:10px;">
<img src="https://www.researchgate.net/profile/Miguel-Vega-4/publication/228966464/figure/fig1/AS:669376512544781@1536603205341/a-Observed-low-resolution-multispectral-image-b-Panchromatic-image-c.ppm" />
</div>
</div>This will align the first to the left, and the second to the right. Works for more than 2 images too.
For a simple approach to just indenting your image a bit, just use some non-breaking spaces with an img element. E.g., <img src="https://user-images.githubusercontent.com/123456/123456789-3aabedfe-deab-4242-97a0-a6641e675e68.png" />
Align image and text side-by-side as part of a paragraph in a single block, within a warning box.
<div class="warning" style='background-color:#EDF2F7; color:#1A2067; border-left: solid #718096 4px; border-radius: 4px;'>
<p style='padding:0.7em; margin-left:0.7em; display: inline-block;'>
<img src="typora_images/image-20211028083121348.png" style="zoom:70%; float:right; padding:0.7em"/>
<b>isomorphism</b> → In mathematics, an isomorphism is a structure-preserving mapping between two structures of the same type that can be reversed by an inverse mapping.<br>
</p>
</div>
Output :
I think the easiest solution is to directly specify align="right":
<img align="right" src=/logo.png" alt="logo" width="100"/>