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

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


当前回答

表的方法

另一种方法是使用表。

<表> < tr > < td valign = "中心" > <span style="margin-bottom: 10px;">一些文本</span> . txt < / td > < td valign = "中心" > < img src = " https://github-readme-stats.vercel.app/api?用户名= hossein13m&show_icons = true&title_color = ffffff&icon_color = 34 abeb&text_color = daf7dc&bg_color = 151515 " / > < / td > < / tr > 表> < /

请记住,这将在GitHub自述文件上工作,但不适用于StackOverflow上的代码片段。

其他回答

另外,如果您可以控制CSS内容,则可以巧妙地使用URL参数和CSS。

Markdown:

![A cute kitten](http://placekitten.com/200/300?style=centerme)

和CSS:

img[src$="centerme"] {
  display:block;
  margin: 0 auto;
}

您可以通过这种方式创建各种样式选项,同时保持Markdown内容不包含额外的代码。当然,如果其他人在其他地方使用Markdown,您无法控制会发生什么,但对于共享的所有Markdown文档来说,这是一个普遍的样式问题。

对于左对齐

 <img align="left" width="600" height="200" src="https://www.python.org/python-.png">

为了正确对齐

<img align="right" width="600" height="200" src="https://www.python.org/python-.png">

对于中心对齐

<p align="center">
  <img width="600" height="200" src="https://www.python.org/python-.png">
</p>

如果您觉得这有用,请在这里分叉以供将来参考。

表的方法

另一种方法是使用表。

<表> < tr > < td valign = "中心" > <span style="margin-bottom: 10px;">一些文本</span> . txt < / td > < td valign = "中心" > < img src = " https://github-readme-stats.vercel.app/api?用户名= hossein13m&show_icons = true&title_color = ffffff&icon_color = 34 abeb&text_color = daf7dc&bg_color = 151515 " / > < / td > < / tr > 表> < /

请记住,这将在GitHub自述文件上工作,但不适用于StackOverflow上的代码片段。

我解决图像定位问题的方法是使用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>

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

“纯”Markdown方法可以处理这个问题,将图像添加到表格中,然后将单元格居中:

| ![Image](img.png) |
| :--: |

它应该生成类似这样的HTML:

<table>
    <thead>
        <tr>
            <th style="text-align:center;"><img src="img.png" alt="Image"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>