picture centering？ 图像居中？

[NGC13009]

Feature request

Problem or desire

How to center the image?

In the previous issue, I found a method to center the image, but this method would disrupt the style of the homepage background image. Currently, it seems that there is no way to center the main text image while ensuring that the homepage background image is normal?

Simply put, I don't want the homepage background image style to be affected while the image is centered. Many current methods cannot guarantee compatibility between the two.

简单来说就是图像居中的同时我不希望主页背景图受到影响，现在的很多方法无法保证两者的兼容性。

Proposal

The images in the main text of the markdown should be automatically centered and can be configured for display style.

Implementation

Perhaps this feature can be achieved through some CSS styles, but currently docisfy doesn't seem to distinguish between the homepage background image and the main text image, so I'm not sure how to center the main text image without affecting the style of the homepage background image.

[Joe Pea]

You can easily achieve this with CSS. You need to learn CSS to do this.

Here's a starting point:

https://www.google.com/search?q=how+to+center+image+in+text+with+css

And here's a guide on CSS on MDN (one of the best resources for web developers):

https://developer.mozilla.org/en-US/docs/Web/CSS

That being said, once you know CSS and markdown, you can easily write something like this inside of your markdown:

<p style="text-align: center;">

![](/path/to/img.png)

</p>

You can also add <style> to your page and style all images inside the main content area:

<style>
  #main {
    p:has(img) {
      text-align: center;
    }
  }
</style>

(That works in all current browsers, but be aware if you support old browsers.)

There are other ways to do it too:

#main {
  p img {
    position: relative;
    left: 50%;
    translate: -50%;
  }
}

Etc. It maye depend on your case.

Once we determine when and how we want to center images, we may be able to add an options. But basically right now CSS has al your options.

Closing, but feel free to discuss if you haven't figured out the CSS.