我一直在看GitHub中使用的降价语法一段时间,但除了将图像调整到readme.md页面的范围外,我无法弄清楚如何将图像居中。
可能吗?如果是的话,怎么样?
我一直在研究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语法的一部分,并提供额外的“功能”。但是,没有支持的扩展名允许您居中图像。
这真的很简单。
-> This is centered Text <-
因此,考虑到这一点,您可以将其应用于img语法。
->![alt text](/link/to/img)<-
这是来自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哲学相悖!
或者,如果你控制了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,你无法控制会发生什么,但这是所有降价文件的一般造型问题。
它适用于我在github上
<p align="center">
<img src="...">
</p>
用于左对齐
<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用于未来参考。
您还可以将图像调整到所需的宽度和高度。例如:
<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页面。
要扩展答案以支持本地图像,只需将FILE_PATH_PLACEHOLDER
替换为您的图像路径并检查它。
<p align="center">
<img src="FILE_PATH_PLACEHOLDER">
</p>
我们可以用这个。请从git文件夹更改ur img的src位置,如果未加载img,则添加替换文本
<p align="center">
<img src="ur img url here" alt="alternate text">
</p>
我解决图像定位问题的方法是使用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>
这个工作正常但是,我想留下它没有进一步的评论......