When you add an image to your markdown it is rendered into a standalone P tag. This P tag holds nothing else but the image. Since the IMG tag is an “in-line” element, the alignment of the image is controlled by changing the “text-alignment” of the parent (P tag) that holds this IMG.
We can use CSS to select this IMG directly inside a P tag like this p > img
.
However, the problem is that we cannot select that P tag directly since all P tags are rendered without any attributes when rendered to HTML. In CSS there is no way to select the PARENT of an element.
I opened an issue about it here The P tag that holds the IMG tag needs a unique class
Overall, it’s not the image that needs the stying, it’s the parent (P tag ) holding the image that needs a default class to set it apart from the others. Adding the functionality to give this P tag a custom name could be a secondary improvement.
I think that writing the code to output a tag like <p class="md_image">
would be a much quicker implementation. Then, we could look into being able to add another class to this tag like <p class="md_image customClass">