logo标签列表

如何在GitHub的README.md文件中居中图片？

githubmarkdown
568

我已经一段时间在研究GitHub中使用的Markdown语法，但除了将图像调整为README.md页面的宽度外，我无法弄清楚如何在其中将图像居中。

这个可行吗？如果可以，我该怎么做呢？

Pandoc 提出了一种描述文本内容的通用语法，如果它成为 Markdown 标准的一部分，将有助于实现图像居中。 - Dave Jarvis
1
这个回答解决了你的问题吗？Markdown 和图片对齐。 - TylerH
18个回答
3
为了支持本地图片，可以稍微扩展一下答案，只需要将FILE_PATH_PLACEHOLDER替换为您的图片路径并查看即可。
<p align="center">
  <img src="FILE_PATH_PLACEHOLDER">
</p>
哪个答案？在发布此答案时，有五个未被删除的答案。或者你是指“这些答案”吗？请通过编辑（更改）您的答案来回复，而不是在评论中回复（不要加上“编辑：”，“更新：”或类似的内容 - 答案应该看起来像是今天写的）。 - Peter Mortensen
0
我找到了一个解决Github的方案，避免使用已弃用的align属性。它还避免了需要填充&nbsp。我制作了一个透明的1920x5 line.png，宽度为"100%"，并将其设置为每列的最后一行。这样可以使每列之间的间距相等。
||
|:--:|
| <img width=200px src="image.png" alt="image alt text"> |
| <img width="100%" src="line.png"> |
0

一种“纯”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 的默认样式表）。 - Richard Smith
我没有意识到它会这样做。在 GitHub 之外，这是我在 Markdown 中居中图片的方法。 - afuzzyllama
点赞了，因为你在这里的回答有助于我的章节 1.4. 使用Markdown表格来改善大小/形状奇怪的图片的垂直间距，我刚刚将其添加到我的回答中。 - Gabriel Staples
0

表格方法

另一种方法是使用表格。

<table>
  <tr>
    <td valign="center">
      <span style="margin-bottom: 10px;"> Some Text </span>
    </td>
    <td valign="center">
      <img src="https://github-readme-stats.vercel.app/api?username=hossein13m&show_icons=true&title_color=ffffff&icon_color=34abeb&text_color=daf7dc&bg_color=151515"/>
    </td>
  </tr>
</table>

请注意，这将适用于GitHub自述文件，但不适用于StackOverflow上的代码片段。
0

打造任何影像中心的正确方式。

你只需要将图片放在一个

标签中，就可以了。

这是一个示例，展示了如何将图片居中显示。

<p align="center" width="100%">
  <img src="./icon/icon128.png" alt="word counter pro logo" />
</p>
-1
我不知道为什么没有人提到 <center> 标签。更多阅读请参考doc。
<center>
    <h1>Hola App</h1> 
    <img src="root/static/assets/img/beer.svg">
</center>
-1
如果对您来说修改图像不是问题，且
如果您知道将显示您的 markdown 的容器的大致宽度，且
如果您的图像仅在一个地方使用（例如仅在 GitHub 中使用的 README），
那么您可以在图像编辑器中编辑图像，并在两侧均匀填充。
填充之前：

Image before edit

填充后：

Image after edit

原始图像（宽度=250px）：

Original image

填充图像（宽度=660px）：

Padded image

-19

这其实很简单。

-> This is centered Text <-

因此请记住，您可以将此应用于img语法。

->![alt text](/link/to/img)<-
5
那是哪种风格的Markdown？ - Wingman4l7
3
我也很好奇。那看起来像是 GitHub 的截图，但 Redcarpet 明显没有实现这个功能。你是如何做到的呢？你能提供 GitHub 上该文件的链接吗？ - ELLIOTTCABLE
3
这是一个 Jeckyll 网站，因此 GitHub 在将其存储到代码库之前会对其进行解析。 - vdclouis
9
提醒所有考虑向管理员举报此回答的人：仅因为一个回答对你无效并不是举报的理由。请留下评论和/或进行点赞或踩。我不会因为技术错误而删除回答。如果vdclouis想要删除回答因为社区认为它没有帮助，那应该是他自己的决定。 - Cody Gray
1
我刚在Github的readme.md文件中尝试了这个，确认它似乎没有起作用。然而，如果OP能够展示它的演示和截图，无论在什么情况下使其工作，我会很感兴趣。 - Gabriel Staples
也许回复一下这些评论？ - Peter Mortensen
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接