Is it possible to caption an aligned image?

[Sonosus]

I have an image aligned like this:

![image2](images/image.jpg){ align=right width=300 }

which, as expected, gives an output of:

I'd like to insert a caption under this image to give more context. I've tried using:

<figure markdown>
![image7](images/3340breakout-module-01.jpg){ align=right width=300 } 
<figcaption>An assembled 'base' PCB</figcaption>
</figure>

however this ignores the alignment and slaps the image back into the centre of the page:

Is there any way to insert an aligned caption?

My markdown_extensions are below:

markdown_extensions:
    - toc:
        permalink: "%"
        permalink: True
    - tables
    - pymdownx.superfences
    - pymdownx.tabbed:
        alternate_style: true 
    - admonition
    - pymdownx.details
    - attr_list
    - md_in_html

TIA for any advice and thanks for all your work on this amazing project!

[squidfunk]

Yes, that's possible. You have to float elements left or right, either by adding your own CSS, or by reusing the inline and inline end modifiers as provided for admonitions – those work on other elements, too. So probably something like:

<figure class="inline end" markdown>
  ![image7](images/3340breakout-module-01.jpg)
  <figcaption>An assembled 'base' PCB</figcaption>
</figure>

Note that the inline modifiers will rescale your image to be as wide as the admonition in the example I linked, and stretch to full width on mobile viewports. If you want to customize the appearance, just add your own classes.

[Sonosus]

This worked perfectly and exactly as expected. Thanks again!

[sekisushai]

Thank you for this anwser @squidfunk ! In my case I would like to change the width. But I'm not sure how to had the corresponding CSS, could you give an example ?