我一直在研究GitHub中使用的Markdown语法,但除了将图像大小调整为README的宽度。md页面,我不知道如何在它的中心图像。

这可能吗?如果有,我该怎么做?


当前回答

这是来自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>

其他回答

表的方法

另一种方法是使用表。

<表> < tr > < td valign = "中心" > <span style="margin-bottom: 10px;">一些文本</span> . txt < / td > < td valign = "中心" > < img src = " https://github-readme-stats.vercel.app/api?用户名= hossein13m&show_icons = true&title_color = ffffff&icon_color = 34 abeb&text_color = daf7dc&bg_color = 151515 " / > < / td > < / tr > 表> < /

请记住,这将在GitHub自述文件上工作,但不适用于StackOverflow上的代码片段。

这其实很简单。

-> This is centered Text <-

记住这一点,你可以把它应用到img语法中。

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

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

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

我一直在看在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中使用的README),

然后你可以在图像编辑器中编辑你的图像,并在两边均匀地填充它。

在填充:

填充后:

原图(宽度= 250px):

填充图像(宽度= 660px):