github README.md中心图像

问题描述 投票:264回答:10

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

可能吗?如果是的话,怎么样?

github markdown
10个回答
128
投票

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

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语法的一部分,并提供额外的“功能”。但是,没有支持的扩展名允许您居中图像。


-10
投票

这真的很简单。

-> This is centered Text <-

因此,考虑到这一点,您可以将其应用于img语法。

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

511
投票

这是来自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哲学相悖!


31
投票

或者,如果你控制了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,你无法控制会发生什么,但这是所有降价文件的一般造型问题。


27
投票

它适用于我在github上

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

16
投票

用于左对齐

 <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用于未来参考。


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 Wiki页面。


4
投票

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

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

4
投票

我们可以用这个。请从git文件夹更改ur img的src位置,如果未加载img,则添加替换文本

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

2
投票

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

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

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

然后,我已将更改推送到repo,并且很遗憾地意识到它不适用于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>

这个工作正常但是,我想留下它没有进一步的评论......

© www.soinside.com 2019 - 2024. All rights reserved.