GitHub的README.md中心图像(github README.md center image

我一直在寻找在GitHub上使用了一段时间，但除了调整到readme.md页面程度的图像降价语法，我无法弄清楚如何在它中心的图像。

可能吗？ 如果是，怎么了？

Answer 1:

我一直在寻找在github上[...]使用降价语法，我无法弄清楚如何中心的图像

TL; DR

不，你不能只依靠降价语法。 降价不具有定位在意。

注意：有些降价处理器支持包括HTML的（如理所当然指出的@ waldyr.ar），并在GitHub的情况下，你可以回退到类似<div style="text-align:center"><img src="..." /></div> 。 要注意的是没有保证的图像将您的资源库是在不同的主机环境分叉（Codeplex上，到位桶，...）或居中，如果该文件未通过浏览器（卓异文本降价预览，MarkdownPad，VisualStudio的网络阅读要点降价预览，...）。

注2：请记住，即使是GitHub的网站内，降价的呈现方式不统一。 维基，例如，不会允许这样的CSS挂羊头卖狗肉的位置。

未删节版

该降价语法不提供一个与控制图像的位置的能力。

事实上，这将是对降价的理念交界允许这样的格式，如中注明“哲学”节

“减价格式的文档要发布的原样，纯文本，而不会像它被打上了标签或格式化指令。”

降价文件由github.com网站通过使用红宝石呈现隆重的接待库。

隆重的接待暴露了一些扩展 （如删除线，例如），它们是不标准降价语法的一部分，并提供额外的“特征”。 然而，没有支持扩展允许您居中的图像。

Answer 2:

这是从GitHub的支持：

嘿Waldyr，

降价不允许直接调整对齐（请参阅文档在这里： http://daringfireball.net/projects/markdown/syntax#img ），但你可以只使用一个原始的HTML“IMG”标签并做直列排列CSS。

干杯，

因此，有可能对准的图像！ 你只需要使用内联CSS来解决这个问题。 您可以从我的一个例子GitHub库 。 在README.md的底部有一个中心对准图像。 为了简单起见，你可以做如下：

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

虽然，作为nulltoken说，这将是对降价的理念边缘！

Answer 3:

或者，如果你有CSS的控制，你可以弄巧用URL参数和CSS 。

降价：

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

和CSS：

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

你可以创造出多种风格选择这种方式，仍然保持降价清洁的额外的代码。 当然，你有过如果别人使用降价别处但那是一般的造型问题与所有的降价文件，一个股票会发生什么无法控制。

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>

叉它在这里以备将来参考，如果你发现这很有用。

Answer 6:

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

<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的维基网页。

Answer 7:

为了扩展答案一点点地支持本地图片，只需更换 FILE_PATH_PLACEHOLDER你的形象路径和检查出来。

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

Answer 8:

我们可以利用这一点。 请从git的文件夹更改乌尔IMG的src位置，并添加替代文本，如果IMG未装载

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

Answer 9:

我的解决与形象定位问题的方法是使用HTML属性：

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

该图像调整和中心正常，至少在我的本地VS降价渲染器。

然后，我已经推更改回购和不幸意识到这是不工作的GitHub的README.md文件 。 不过，我会离开这个答案，因为它可能会帮助别人。

所以最后，我已经结束了使用好老的HTML标记：

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

但猜猜怎么了？ 有些JS方法取代了我的style属性！ 我甚至试过class属性，并具有相同的结果！

然后我发现下面的要点网页 ，其中使用更老派的HTML：

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

这一个是工作正常不过，我想离开它没有进一步评论？

Answer 10:

这是真的很简单。

-> This is centered Text <-

因此，采取考虑到这一点，你可以将此到IMG语法。

->![alt text](/link/to/img)<-

文章来源: github README.md center image