如何在README中居中显示图像。md文件在GitHub?

我一直在研究GitHub中使用的Markdown语法，但除了将图像大小调整为README的宽度。md页面，我不知道如何在它的中心图像。

这可能吗?如果有，我该怎么做?

当前回答

我解决图像定位问题的方法是使用HTML属性:

![Image](Image.svg){ width="800" height="600" style="display: block; margin: 0 auto" }

图像被正确地调整了大小和居中，至少在我本地的Visual Studio Community Markdown渲染器中是这样。

然后，我已经将更改推到存储库，不幸的是，我意识到它不适用于GitHub README。md文件。尽管如此，我还是留下这个答案，因为它可能会帮助其他人。

所以最后，我已经结束使用好的旧HTML标签代替:

<img src="Image.svg" alt="Image" width="800" height="600" style="display: block; margin: 0 auto" />

但你猜怎么着?一些JavaScript方法取代了我的样式属性!我甚至尝试了类属性和相同的结果!

然后我发现了以下要点页面，其中使用了更多的老式HTML:

<p align="center">
    <img src="Image.svg" alt="Image" width="800" height="600" />
</p>

然而，这一个工作得很好，我想在没有进一步评论的情况下离开它…

其他回答

为了扩展答案以支持本地图像，只需将FILE_PATH_PLACEHOLDER替换为图像路径并检查它。

<p align="center">
  <img src="FILE_PATH_PLACEHOLDER">
</p>

我不知道为什么没有人提到<center>标签。更多阅读请参考医生。

<center>
    <h1>Hola App</h1> 
    <img src="root/static/assets/img/beer.svg">
</center>

如果修改图像对您来说不是问题，那么

如果您知道将显示减价的容器的大致宽度，以及

如果你的图像只在一个地方使用(例如只在GitHub中使用的README)，

然后你可以在图像编辑器中编辑你的图像，并在两边均匀地填充它。

在填充:

填充后:

原图(宽度= 250px):

填充图像(宽度= 660px):

它在GitHub上为我工作

<p align="center">
    <img src="...">
</p>

我为Github找到了一个解决方案，避免使用已弃用的对齐属性。它还避免了需要填充&nbsp。我制作了一个透明的1920x5 line.png，宽度="100%"，并将其作为每一列的最后一行。每一列之间的空间相等。

||
|:--:|
| <img width=200px src="image.png" alt="image alt text"> |
| <img width="100%" src="line.png"> |

推荐文章