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

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


当前回答

对于左对齐

 <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>

如果您觉得这有用,请在这里分叉以供将来参考。

其他回答

我们可以用下面的。请从Git文件夹中更改图像的src位置,如果图像未加载,请添加备用文本:

 <p align="center">
    <img src="your image URL here" alt="alternate text">
 </p>

另外,如果您可以控制CSS内容,则可以巧妙地使用URL参数和CSS。

Markdown:

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

和CSS:

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

您可以通过这种方式创建各种样式选项,同时保持Markdown内容不包含额外的代码。当然,如果其他人在其他地方使用Markdown,您无法控制会发生什么,但对于共享的所有Markdown文档来说,这是一个普遍的样式问题。

“纯”Markdown方法可以处理这个问题,将图像添加到表格中,然后将单元格居中:

| ![Image](img.png) |
| :--: |

它应该生成类似这样的HTML:

<table>
    <thead>
        <tr>
            <th style="text-align:center;"><img src="img.png" alt="Image"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

我为Github找到了一个解决方案,避免使用已弃用的对齐属性。它还避免了需要填充&nbsp。我制作了一个透明的1920x5 line.png,宽度="100%",并将其作为每一列的最后一行。每一列之间的空间相等。

||
|:--:|
| <img width=200px src="image.png" alt="image alt text"> |
| <img width="100%" src="line.png"> |

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