github README.md中心图像-Java 学习之路

229

我一直在看GitHub中使用的降价语法一段时间，但除了将图像调整到readme.md页面的大小之外，我无法弄清楚如何将图像居中 .

可能吗？如果是，怎么样？

10 回答

-10

我一直在看github [...]中使用的markdown语法，我无法弄清楚如何使图像居中

TL;DR

不，你不能依靠Markdown语法 only . Markdown不关心定位 .

注意：某些降价处理器支持包含HTML（正如@ waldyr.ar正确指出的那样），而在GitHub案例中，您可能会回退到类似 <div style="text-align:center"><img src ="..." /></div> 的内容 . 请注意，通过浏览器读取（Sublime Text Markdown预览，MarkdownPad，VisualStudio Web Essentials Markdown预览，......） .

注意2：请记住，即使在GitHub网站内，呈现降价的方式也不统一 . 例如，wiki不会允许这样的css位置欺骗 .

Unabridged version

Markdown syntax 没有提供控制图像位置的功能 .

事实上，正如 "Philosophy" 部分所述，允许这种格式化将与Markdown哲学相悖

“Markdown格式的文档应该像普通文本一样可以发布，而不是看起来像是标记了标签或格式说明 . ”

Markdown文件由github.com网站通过使用Ruby Redcarpet 库呈现 .

Redcarpet暴露了一些 extensions （例如删除线），它们不是标准Markdown语法的一部分，并提供额外的"features" . 但是，没有支持的扩展名允许您居中图像 .

回复于 2024-04-29T13:37:41+08:00
6
这是来自Github的支持：

嗨Waldyr，Markdown不允许你直接调整对齐（参见这里的文档：http：//daringfireball.net/projects/markdown/syntax#img），但你可以使用原始的HTML'img'标签并做与内联css对齐 . 干杯，

所以 it is possible to align images! 你只需要使用内联css来解决问题 . 你可以从我的github repo举个例子 . 在README.md的底部有一个居中对齐的图像 . 为简单起见，您可以执行以下操作：
```

 <img />

```
虽然，正如nulltoken所说，它将与Markdown哲学相悖！
回复于 2024-04-29T13:37:41+08:00
471
或者，如果你有控制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，你无法控制会发生什么，但这就是所有降价文件的一般造型问题 .
回复于 2024-04-29T13:37:41+08:00
4
它适用于我在github上
```
 
<img src="...">

```
回复于 2024-04-29T13:37:41+08:00
1
您还可以将图像调整为所需的 width 和 height . 例如：
```

 <img src="https://anyserver.com/image.png" width="750px" height="300px"/>
```
要向图像添加居中的 caption ，只需再添加一行：
```
This is a centered caption for the image
```
幸运的是，这适用于README.md和GitHub Wiki页面 .
回复于 2024-04-29T13:37:41+08:00

114

对于 left alignment

<img align="left" width="600" height="200" src="https://www.python.org/python-.png">

对于 right alignment

<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用于将来的参考 .

回复于 2024-04-29T13:37:41+08:00

22
要扩展答案以支持本 Map 像，只需 replace FILE_PATH_PLACEHOLDER 到您的图像路径并检查它 .
```

 <img src="FILE_PATH_PLACEHOLDER">

```
回复于 2024-04-29T13:37:41+08:00
26
我们可以用这个 . 请从git文件夹更改ur img的src位置，如果未加载img则添加替换文本
```
 
 <img src="ur img url here" alt="alternate text">
 
```
回复于 2024-04-29T13:37:41+08:00
6
我解决图像定位问题的方法是使用HTML属性：
```
![Image](Image.svg){ width="800" height="600" style="display: block; margin: 0 auto" }
```
图像已调整大小并正确居中，至少在我的本地VS降价渲染器中 .

然后，我已经将更改推送到repo，并且很遗憾地意识到它是 not working for GitHub README.md file . 不过，我会留下这个答案，因为它可能对其他人有帮助 .

最后，我最终使用了旧的HTML标签：
```
<img src="Image.svg" alt="Image" width="800" height="600" style="display: block; margin: 0 auto" />
```
但猜猜怎么了？一些JS方法取代了我的 style 属性！我甚至尝试了 class 属性，结果相同！

然后我找到了以下gist page，其中使用了更多的老式HTML：
```

 <img src="Image.svg" alt="Image" width="800" height="600" />

```
这个工作正常但是，我想留下它没有进一步的评论......
回复于 2024-04-29T13:37:41+08:00
2
这真的很简单 .
```
-> This is centered Text <-
```
因此，请记住，您可以将其应用于img语法 .
```
->![alt text](/link/to/img)<-
```
回复于 2024-04-29T13:37:41+08:00

github README.md中心图像

10 回答

相关问题