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

经验分享
1

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即可。

来源：

5 个赞
2

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

3

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

4

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

2 个赞
5

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

1 个赞
6

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

7

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

8

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

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

9 
/* 强制增加图片对齐语法 */
/* 在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 个赞
10

整体复制吗？为什么我的还是不成功

11

倒数第二行多了一个auto，去掉即可，也可以直接复制这个到你的css里面。

/* 强制增加图片对齐语法 */
/* 在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 !important;
}
1 个赞
12

如何让图片缩小尺寸显示在一行呢