4.1.230226 obsidian的图片如何居中显示?

obsidin的图片默认是左边对齐,非常不习惯,居中更加的美观,看了B站的视频,发现使用CSS代码可以实现。第一次用CSS进行外观自定义:

  • 使用pycharm新建一个css文件
  • 将如下的代码放到css文件中:
img {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

 .markdown-source-view.mod-cm6 .cm-content > * {
    margin: auto auto !important;
}

  • 打开设置,进入外观,找到CSS代码片段的位置

  • 点击上图的文件夹,将CSS文件放到这个文件夹中,然后启用这个css即可。

来源:

3 个赞

这个我只在阅读模式有效,编辑模式图片还是居左的,你也一样吗

这个应该跟你的主题有关系,我用的默认主题,在三种模式中都可以生效。

请教,已经使用了上述css,能够实现编辑、阅读模式下的图片居中,
但发现如果使用了图床链接图片,图片能显示但是左对齐的,一直没明白是什么问题,
目前用的是minimal主题

1 个赞

应该是底下那里多了一个auto。 改成这样就行了。margin: auto !important;

1 个赞

非常感谢,就是多了一个 auto

说下地址的事情,最好放在:E:\xyz\obsidian xyz.obsidian\snippets,下面

img {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}

.markdown-source-view.mod-cm6 .cm-content > * {
margin: auto !important;
}

/* 强制增加图片对齐语法 */
/* 在md文件中,图片的对齐语法是:![[Pasted image 20221125235721.png#right]]   */

/* 不填写默认居中 */
.markdown-source-view.mod-cm6.is-live-preview .image-embed,
.markdown-preview-view .image-embed {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

/* 如果图片的链接中包含 #right 的,图片居右显示 */
.markdown-source-view.mod-cm6.is-live-preview [src*="#right"],
.markdown-preview-view .image-embed[src*="#right"] {
  display: flex;
  justify-content: flex-end;
}

/* 如果图片的链接中包含 #left 的,图片居左显示 */
.markdown-source-view.mod-cm6.is-live-preview [src*="#left"],
.markdown-preview-view .image-embed[src*="#left"] {
  display: flex;
  justify-content: flex-start;
}

/* 远程Image */
img [src*="#https"],
img [src*="#http"] {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.markdown-source-view.mod-cm6 .cm-content > * {
  margin: auto auto !important;
}

1 个赞