Floating images

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">

1 Like