Question

我一直在看GitHub中使用的降价语法一段时间，但除了将图像调整到readme.md页面的范围外，我无法弄清楚如何将图像居中。

有可能吗？如果是，怎么样？

Answer 1

这是来自Github的支持：

嘿Waldyr，

Markdown不允许您直接调整对齐方式（请参阅此处的文档：http://daringfireball.net/projects/markdown/syntax#img），但您可以使用原始HTML“img”标记并与内联css进行对齐。

干杯，

所以可以对齐图像！您只需使用内联css来解决问题。您可以从我的github repo中获取示例。在README.md的底部有一个居中对齐的图像。为简单起见，您可以按照以下步骤操作：

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

虽然，正如nulltoken所说，它将与Markdown哲学相悖！

Answer 2

我一直在研究github [...]中使用的降价语法，我无法弄清楚如何将图像居中

<强> TL; DR

不，你不能仅依赖Markdown语法。 Markdown不关心定位。

注意：某些降价处理器支持包含HTML（正如@ waldyr.ar正确指出的那样），而在GitHub案例中，您可能会回退到<div style="text-align:center"><img src="..." /></div>之类的内容。请注意，如果您的存储库在不同的托管环境（Codeplex，BitBucket，...）中分叉，或者如果不通过浏览器读取文档，则无法保证图像将居中（Sublime Text Markdown预览，MarkdownPad，VisualStudio Web Essentials Markdown预览，...）。

注2：请记住，即使在GitHub网站内，呈现降价的方式也不统一。例如，wiki不会允许这种css位置欺骗。

完整版本

Markdown syntax 无法提供控制图像位置的功能。

事实上，正如 "Philosophy" 部分所述，允许这种格式化将与Markdown哲学相悖。

“Markdown格式的文档应该像普通文本一样可以发布，而不是看起来像是用标签或格式说明标记的。”

Markdown文件由github.com网站通过使用Ruby Redcarpet 库呈现。

Redcarpet公开了一些 extensions （例如删除线），这些不是标准Markdown语法的一部分，并提供其他“功能”。但是，没有受支持的扩展程序允许您居中图像。

Answer 3

或者，如果你控制了css，你可以通过url parameters and css变得聪明。

降价：

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

和CSS：

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

您可以通过这种方式创建各种样式选项，并且仍然可以使标记清除额外的代码。当然，如果其他人在其他地方使用markdown，你就无法控制会发生什么，但这是所有降价文件的一般造型问题。

Answer 4

它适用于我在github上

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

Answer 5

左对齐

 <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>

如果您觉得这很有用，请将它here用于将来的参考。

Answer 6

只需转到 Readme.md 文件并使用此代码。

<div align="center">
<img src=https://newfastuff.com/wp-content/uploads/2019/05/bW7QXVB.png" >
<p>Perfectly balanced</p>
</div>

<div align=”center”> [ Your content here ]</div>适合页面中的所有内容，并根据页面尺寸使其居中对齐。

Answer 7

您还可以将图像调整为所需的宽度和高度。例如：

<p align="center">
  <img src="https://anyserver.com/image.png" width="750px" height="300px"/></p>

要向图片添加居中的字幕，只需再添加一行：

<p align="center">This is a centered caption for the image<p align="center">

幸运的是，这适用于README.md和GitHub Wiki页面。

Answer 8

要稍微扩展答案以支持本地图片，只需将 FILE_PATH_PLACEHOLDER替换为您的图片路径并将其检出。

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

Answer 9

我们可以使用它。请从git文件夹中更改ur img的src位置，如果未加载img，请添加替代文本

 <p align="center"> 
    <img src="ur img url here" alt="alternate text">
 </p>

Answer 10

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

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

至少在我的本地VS markdown渲染器中，图像已调整大小并正确居中。

然后，我将更改推送到存储库中，不幸的是意识到它不适用于GitHub README.md文件。不过，我会留下这个答案，因为它可能会对其他人有所帮助。

所以最后，我最终使用了很好的旧HTML标记：

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

但是你猜怎么着？一些JS方法取代了我的style属性！我什至尝试了class属性，结果还是一样！

然后我发现在gist page之后，使用了更多的老式HTML：

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

这个很好，但是，我想不加评论...

Answer 11

可以处理此问题的“纯”降价方法是将图像添加到表格中，然后将单元居中：

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

它应该产生类似于以下内容的HTML：

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