我一直在研究GitHub中使用的Markdown语法,但除了将图像大小调整为README的宽度。md页面,我不知道如何在它的中心图像。
这可能吗?如果有,我该怎么做?
我一直在研究GitHub中使用的Markdown语法,但除了将图像大小调整为README的宽度。md页面,我不知道如何在它的中心图像。
这可能吗?如果有,我该怎么做?
当前回答
另外,如果您可以控制CSS内容,则可以巧妙地使用URL参数和CSS。
Markdown:

和CSS:
img[src$="centerme"] {
display:block;
margin: 0 auto;
}
您可以通过这种方式创建各种样式选项,同时保持Markdown内容不包含额外的代码。当然,如果其他人在其他地方使用Markdown,您无法控制会发生什么,但对于共享的所有Markdown文档来说,这是一个普遍的样式问题。
其他回答
我为Github找到了一个解决方案,避免使用已弃用的对齐属性。它还避免了需要填充 。我制作了一个透明的1920x5 line.png,宽度="100%",并将其作为每一列的最后一行。每一列之间的空间相等。
||
|:--:|
| <img width=200px src="image.png" alt="image alt text"> |
| <img width="100%" src="line.png"> |
我一直在看在GitHub使用Markdown语法[…]),我不知道怎样把图像居中
博士TL;
不,你不能只依赖Markdown语法。Markdown不关心定位。
注意:一些Markdown处理器支持包含HTML(正如@waldyr.ar正确指出的那样),在GitHub的情况下,您可以退回到类似于<div style="text-align:center"><img src="…"/ > < / div >。
注意,如果你的存储库在不同的托管环境中(CodePlex, Bitbucket等),或者如果文档不是通过浏览器读取(Sublime Text Markdown预览,MarkdownPad, Visual Studio Web Essentials Markdown预览,…),就不能保证图像将位于中心。
注2:请记住,即使在GitHub网站中,Markdown的呈现方式也不是统一的。例如,wiki不允许这样的CSS位置诡计。
完整的版本
Markdown语法没有提供控制图像位置的功能。
事实上,允许这样的格式是与Markdown哲学相冲突的,正如“哲学”部分所述。
“标记格式的文档应该是可以按原样发布的,就像纯文本一样,而不是看起来像被标记了标签或格式说明。”
Markdown文件是由github.com网站通过使用Ruby Redcarpet库渲染的。
Redcarpet公开了一些扩展(例如strikethrough),这些扩展不是标准Markdown语法的一部分,并提供了额外的“特性”。但是,没有支持的扩展允许您将图像居中。
这是来自GitHub的支持:
Markdown不允许你直接调整对齐(见文档这里:http://daringfireball.net/projects/markdown/syntax#img),但你可以只使用原始HTML 'img'标签,并与内联css对齐。
因此,对齐图像是可能的!你只需要使用内联CSS来解决这个问题。你可以从我的GitHub存储库中拿一个例子。在README的底部。这是一个居中对齐的图像。为了简单起见,你可以这样做:
<p align="center">
<img src="http://some_place.com/image.png" />
</p>
尽管,正如nulltoken所说,这将是与Markdown哲学的边缘!
这段代码来自我的README文件:
<p align="center">
<img src="https://github.com/waldyr/Sublime-Installer/blob/master/sublime_text.png?raw=true" alt="Sublime's custom image"/>
</p>
它产生以下图像输出,除了在GitHub上查看时居中:
<p align="center">
<img src="https://github.com/waldyr/Sublime-Installer/blob/master/sublime_text.png?raw=true" alt="Sublime's custom image"/>
</p>
我解决图像定位问题的方法是使用HTML属性:
{ 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方法可以处理这个问题,将图像添加到表格中,然后将单元格居中:
|  |
| :--: |
它应该生成类似这样的HTML:
<table>
<thead>
<tr>
<th style="text-align:center;"><img src="img.png" alt="Image"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>