github README.md中心图片

337

我一直在研究GitHub中使用的markdown语法，但是除了将图像调整为readme.md页面的大小外，我不知道如何在其中居中放置图像。

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

github  markdown 
— 约翰尼·鲍林
source
Pandoc提出了一种用于描述文本内容的通用语法，如果该文本内容成为Markdown标准的一部分，则将有助于使图像居中。
— 戴夫·贾维斯
1
这回答了你的问题了吗？
— 降价

Answers:

161

我一直在查看github [...]中使用的markdown语法，我不知道如何将图像居中

TL; DR

不，您不能仅依靠Markdown语法。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网站内，markdown的呈现方式也不统一。例如，维基不允许这种CSS位置欺骗。

未删节的版本

该降价语法不提供一个与控制图像的位置的能力。

实际上，如“哲学”一节中所述，允许这种格式与Markdown哲学的界限很近。

“ Markdown格式的文档应以纯文本的形式原样发布，而不会看起来像被标签或格式说明所标记。”

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

Redcarpet公开了一些扩展（例如删除线），这些扩展不是标准Markdown语法的一部分，而是提供了附加的“功能”。但是，没有受支持的扩展名允许您将图像居中。

— 空令牌
source
4
谢谢，我解决了图像过大的问题。可惜他们的带宽，但他们让我别无选择
— 约翰尼·鲍林
47
效果很好：<img align="..." src="..." alt="...">
— Nux
@JohonnyPauling，如果您担心不使用过多的github bandwith，可以看一下Raw Git，它提供了存储在GitHub上的文件，并将它们缓存在它们的系统上。因此，只需对GitHub上的资源执行一次访问，即可节省带宽。
— danidemi
6
原始markdown处理span标签内的markdown语法。因此，应执行以下操作： <span style="display:block;text-align:center">![Test Automation]Automated-Testing.png)</span>
— Dakshinamurthy Karra
6
在align上一个属性img标签不再推荐使用HTML 4.01的和过时的HTML5的。
— taylorthurlow
602

这是来自Github的支持：

嘿Waldyr，

Markdown不允许您直接调整对齐方式（请参阅此处的文档：http : //daringfireball.net/projects/markdown/syntax#img），但是您可以使用原始HTML'img'标签并使用内联进行对齐css。

干杯，

因此可以对齐图像！您只需要使用内联CSS即可解决问题。您可以从我的github repo中举一个例子。README.md的底部有一个居中对齐的图像。为简单起见，您可以执行以下操作：

<p align="center">
  <img src="http://some_place.com/image.png" />
</p>

尽管，正如nulltoken所说，这将与Markdown哲学相提并论！

此代码来自我的自述文件：

<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上居中时除外：

Sublime的自定义图片

— 瓦尔迪尔
source
93
我不知道为什么这不是公认的答案。该答案实际上向询问者说明了如何完成任务。
— Fergus在伦敦，2012年
92
+1，我不在乎这是否与减价哲学背道而驰，我只想将图像居中！：D
— Gabriel Llamas
6
是的，采用降价促销的理念，只是让我们让事情看起来很漂亮：p
— Thomas
3
这似乎可行（如发布者的回购所示），但Github Wiki不支持CSS。我为指定CSS所做的每一次尝试都被删除了。同样，当我尝试在Wiki中执行操作时，指定的align属性也会被删除。
— Shawn South
4
似乎HTML5不支持该align属性？
— ostrokach
40

另外，如果您可以控制CSS，则可以通过url参数和css变得更聪明。

降价：

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

和CSS：

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

您可以通过这种方式创建各种样式选项，并且仍然使markdown清除多余的代码。当然，如果其他人在其他地方使用降价，您将无法控制，但是那是所有降价文件共享一个普遍的样式问题。

— 网络袋熊
source
2
这很好，但是在查询字符串（？）上使用锚（＃）可能是更好的解决方案，因为我在以下答案中发布：stackoverflow.com/questions/255170/markdown-and-image-alignment / ...-但是我不知道不相信github readme.md支持定义CSS。
— 震颤
对于运行自己的GitLab实例的用户而言，完美的解决方案！
— Xunnamius '19
33

对于左对齐 

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

如果您觉得有用，请在此处分叉以备将来参考。

— 网络
source
9

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

<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页面均适用。

— hy
source
9

我们可以使用它。请从git文件夹中更改ur img的src位置，如果未加载img，请添加替代文本

 <p align="center"> 
    <img src="ur img url here" alt="alternate text">
 </p>
— 苏涅特·帕蒂尔
source
5

只需转到Readme.md文件并使用此代码。

<div align="center">
<img src=https://newfastuff.com/wp-content/uploads/2019/05/bW7QXVB.png" >
<p>Perfectly balanced</p>
</div>

在此处输入图片说明

<div align=”center”> [ Your content here ]</div> 适合页面中的所有内容，并根据页面的尺寸使其居中对齐。

— 马鲁夫·哈桑（Maruf Hassan）
source
仅使用div容器即可在GitLab自述文件页面上正确执行
— p4pp3rfry
4

要扩展答案以支持本地图像，只需替换 FILE_PATH_PLACEHOLDER为图像路径并签出即可。

<p align="center">
  <img src="FILE_PATH_PLACEHOLDER">
</p>
— 帕特里克
source
3

解决图像定位问题的方法是使用HTML属性：

![Image](Image.svg){ width="800" height="600" style="display: block; margin: 0 auto" }

至少在我的本地VS markdown渲染器中，图像已调整大小并正确居中。

然后，我将更改推送到存储库，不幸的是意识到它不适用于GitHub README.md文件。不过，我会留下这个答案，因为它可能会对其他人有所帮助。

所以最后，我最终使用了很好的旧HTML标记：

<img src="Image.svg" alt="Image" width="800" height="600" style="display: block; margin: 0 auto" />

但猜猜怎么了？一些JS方法取代了我的style属性！我什至尝试了class属性，并且结果相同！

然后我发现以下要点页面，其中使用了更多的老式HTML：

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

这项工作正常，但是，我想不做进一步评论。

— Gucu112
source
0

可以处理此问题的“纯”降价方法是将图像添加到表格中，然后将单元居中：

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

它应产生类似于以下内容的HTML：

<table>
    <thead>
        <tr>
            <th style="text-align:center;"><img src="img.png" alt="Image"></th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
— 流行病
source
这似乎不起作用：表格的宽度由其内容的宽度决定。它还在图像周围放置边框（根据github的默认样式表）。
— 理查德·史密斯
我没有意识到它做到了。在GitHub之外，这就是我如何在markdown中居中放置图像。
— afuzzyllama
0

TLDR；

使用此HTML / CSS添加图像并居中，并将其大小设置为markdown文件中屏幕空间宽度的60％，通常这是一个很好的起始值：

<img src="https://i.stack.imgur.com/RJj4x.png" 
     style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">

将widthCSS值更改为所需的百分比，或将其全部删除以使用markdown默认大小，如果图像大于屏幕，则我认为它是屏幕宽度的100％，否则为实际图像宽度。

做完了！

或者，继续阅读以获取更多信息。

以下是各种HTML和CSS选项，它们可以在markdown文件中完美运行：

1.在markdown文件中居中并配置（调整大小）所有图像：

只需将其复制并粘贴到markdown文件的顶部即可居中并调整文件中所有图像的大小（然后只需使用常规markdown语法插入所需的任何图像）即可：

<style>
img
{
    display:block; 
    float:none; 
    margin-left:auto;
    margin-right:auto;
    width:60%;
}
</style>

或者，这是与上面相同的代码，但是带有详细的HTML和CSS注释以确切说明正在发生的事情：

<!-- (This is an HTML comment). Copy and paste this entire HTML `<style>...</style>` element (block)
to the top of your markdown file -->
<style>
/* (This is a CSS comment). The below `img` style sets the default CSS styling for all images
hereafter in this markdown file. */
img
{
    /* Default display value is `inline-block`. Set it to `block` to prevent surrounding text from
    wrapping around the image. Instead, `block` format will force the text to be above or below the
    image, but never to the sides. */
    display:block; 
    /* Common float options are `left`, `right`, and `none`. Set to `none` to override any previous
    settings which might have been `left` or `right`. `left` causes the image to be to the left,
    with text wrapped to the right of the image, and `right` causes the image to be to the right,
    with text wrapped to its left, so long as `display:inline-block` is also used. */
    float:none; 
    /* Set both the left and right margins to `auto` to cause the image to be centered. */
    margin-left:auto;
    margin-right:auto;
    /* You may also set the size of the image, in percent of width of the screen on which the image
    is being viewed, for example. A good starting point is 60%. It will auto-scale and auto-size
    the image no matter what screen or device it is being viewed on, maintaining proporptions and 
    not distorting it. */
    width:60%;
    /* You may optionally force a fixed size, or intentionally skew/distort an image by also 
    setting the height. Values for `width` and `height` are commonly set in either percent (%) 
    or pixels (px). Ex: `width:100%;` or `height:600px;`. */
    /* height:400px; */
}
</style>

现在，是否使用markdown插入图像：

![](https://i.stack.imgur.com/RJj4x.png)

或Markdown文件中的HTML：

<img src="https://i.stack.imgur.com/RJj4x.png">

...它会自动居中，其大小为屏幕视图宽度的60％，如上面的HTML和CSS中的注释所述。（当然，60％的尺寸实际上也很容易更改，我下面还会介绍一些简单的方法来逐个图像地进行更改）。

2.逐个居中并配置映像，一次生成一个：

无论您是否已将上面的<style>块复制并粘贴到markdown文件的顶部，这也将起作用，因为它会覆盖并优先于您可能在上面设置的任何文件范围样式设置：

<img src="https://i.stack.imgur.com/RJj4x.png" style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">

您也可以像这样在多行上设置其格式，并且仍然可以使用：

<img src="https://i.stack.imgur.com/RJj4x.png" 
     alt="this is an optional description of the image to help the blind and show up in case the 
          image won't load" 
     style="display:block; /* override the default display setting of `inline-block` */ 
            float:none; /* override any prior settings of `left` or `right` */ 
            /* set both the left and right margins to `auto` to center the image */
            margin-left:auto; 
            margin-right:auto;
            width:60%; /* optionally resize the image to a screen percentage width if you want too */
            ">

3.除了上述所有以外，您还可以创建CSS样式类来帮助样式化单个图像：

将整个内容添加到markdown文件的顶部。 

<style>

/* By default, make all images center-aligned, and 60% of the width 
of the screen in size */
img
{
    display:block; 
    float:none; 
    margin-left:auto;
    margin-right:auto;
    width:60%;
}

/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
    display:inline-block;
    float:left;
    /* provide a 15 pixel gap between the image and the text to its right */
    margin-right:15px; 
}

/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
    display:inline-block;
    float:right;
    /* provide a 15 pixel gap between the image and the text to its left */
    margin-left:15px;
}

</style>

现在，您的imgCSS块已将图像居中设置为默认设置，并且将其设置为屏幕空间宽度的60％，但是您可以使用leftAlign和rightAlignCSS类逐个图像地覆盖这些设置。

例如，此图像将居中对齐，并且尺寸为60％（我在上面设置的默认值）：

<img src="https://i.stack.imgur.com/RJj4x.png">

使用上面刚刚创建的CSS类，该图像将左对齐，而其文本右对齐leftAlign。

<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign">

它可能看起来像这样：

在此处输入图片说明

您仍然可以通过styleattribute 覆盖其任何CSS属性，例如width，如下所示：

<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign" style="width:20%">

现在，您将获得：

在此处输入图片说明

4.创建3个CSS类，但不要更改imgmarkdown的默认值

上面显示的另一种选择是修改默认img property:value设置并创建2个类，只是保留所有默认的markdown img属性，而创建3个自定义CSS类，如下所示：

<style>

/* Create a CSS class to style images to center-align */
.centerAlign
{
    display:block;
    float:none;
    /* Set both the left and right margins to `auto` to cause the image to be centered. */
    margin-left:auto;
    margin-right:auto;
    width:60%;
}

/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
    display:inline-block;
    float:left;
    /* provide a 15 pixel gap between the image and the text to its right */
    margin-right:15px; 
    width:60%;
}

/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
    display:inline-block;
    float:right;
    /* provide a 15 pixel gap between the image and the text to its left */
    margin-left:15px;
    width:60%;
}

</style>

当然，像这样使用它们：

<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign" style="width:20%">

请注意，我是如何width使用style上面的CSS 属性手动设置属性的，但是如果我想做一些更复杂的事情，我还可以创建一些类似的类，将它们添加到<style>...</style>上面的块中：

/* custom CSS class to set a predefined "small" size for an image */
.small
{
    width:20%;
    /* set any other properties, as desired, inside this class too */
}

现在，您可以像这样将多个类分配给同一对象。只需用空格（而不是逗号）分隔类名。如果发生设置冲突，我相信以最后一个设置为准，它将覆盖所有先前设置的设置，然后生效。如果您在同一CSS类中或同一HTML style属性中多次设置相同的CSS属性，情况也应该如此。

<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign small">

5.合并CSS类中的通用设置：

最后一个技巧是我在这里的答案中学到的：如何使用CSS设置不同图像的样式？。正如您在上面看到的，所有3个CSS align类都将图像宽度设置为60％。因此，如果需要，可以一次设置所有通用设置，然后可以为每个班级设置特定设置：

<style>

/* set common properties for multiple CSS classes all at once */
.centerAlign, .leftAlign, .rightAlign {
    width:60%;
}

/* Now set the specific properties for each class individually */

/* Create a CSS class to style images to center-align */
.centerAlign
{
    display:block;
    float:none;
    /* Set both the left and right margins to `auto` to cause the image to be centered. */
    margin-left:auto;
    margin-right:auto;
}

/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
    display:inline-block;
    float:left;
    /* provide a 15 pixel gap between the image and the text to its right */
    margin-right:15px; 
}

/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
    display:inline-block;
    float:right;
    /* provide a 15 pixel gap between the image and the text to its left */
    margin-left:15px;
}

/* custom CSS class to set a predefined "small" size for an image */
.small
{
    width:20%;
    /* set any other properties, as desired, inside this class too */
}

</style>

更多细节：

1.我对Markdown中的HTML和CSS的看法

就我而言，可以在markdown文档中编写并获得所需结果的所有内容，而不是“纯markdown”语法。

在C和C ++中，编译器将编译为汇编代码，然后将汇编汇编为二进制。但是，有时候，您需要只有程序集才能提供的低级控件，因此您可以在C或C ++源文件内部编写内联程序集。汇编是“底层”语言，可以直接在C和C ++中编写。

降价也是如此。Markdown是一种高级语言，可以解释为HTML和CSS。但是，在需要额外控制的地方，我们可以直接在markdown文件中“内联”较低级的HTML和CSS，并且仍然可以正确地解释它们。因此，从某种意义上说，HTML和CSS 是有效的“降价”语法。

因此，要将图像放在markdown中，请使用HTML和CSS。

2.在markdown中插入标准图片：

如何使用默认的“幕后” HTML和CSS格式在markdown中添加基本图像：

这个降价：

![](https://i.stack.imgur.com/RJj4x.png)

将产生以下输出：

这是我制造的射击直升机。

您也可以选择在方括号中添加说明。老实说，我什至不知道该怎么做，但是也许它被转换成HTML <img>元素alt属性，以防图像无法加载时显示该属性，并且屏幕阅读器可以为盲人阅读。因此，此减价：

![this is my hexacopter I built](https://i.stack.imgur.com/RJj4x.png)

还将产生以下输出：

这是我建造的六角直升机

3.在markdown中居中并调整图像大小时，有关HTML / CSS中发生的情况的更多详细信息：

以markdown为中心的图片要求我们使用HTML和CSS可以直接为我们提供的额外控件。您可以像这样插入和居中单个图像：

<img src="https://i.stack.imgur.com/RJj4x.png" 
     alt="this is my hexacopter I built" 
     style="display:block; 
            float:none; 
            margin-left:auto; 
            margin-right:auto;
            ">

这是更多信息。关于这里发生的事情：

  1. 在<img上面的代码的部分是HTML“ 开始标记 ”，而>在端部是HTML“ 结束标记 ”。
  2. 从开始标记到结束标记（包括首尾）的所有内容都构成了此HTML img“ 元素 ”。
  3. HTML img “标签” /“元素”用于将图像插入HTML。
  4. 元素内的每个分配都在配置HTML“ 属性 ”。
  5. 在“风格”属性接受CSS样式，所以双引号里面这里的一切：style=""是CSS property:value键值“ 宣言 ”。
    1. 请注意，每个CSS“属性：值声明”均以分号（;）分隔，而此“元素”中的每个HTML“属性”均以空格（）分隔。
  6. 为了使图像集中在上面的HTML和CSS代码中，关键的“属性”就是“ src和” style。
  7. 在alt一个是可选的。
  8. 里面的HTML style属性，它接受CSS样式，关键的声明都是4，我显示：display:block，float:none，margin-left:auto，和margin-right:auto。
    1. 如果以前没有任何东西之前设置过该float 属性，则可以省略此声明，但是还是以防万一，还是个好主意。
    2. 如果首先在这里学会了如何使用HTML和CSS对图像进行居中：https : //www.w3schools.com/howto/howto_css_image_center.asp。
  9. CSS使用C样式的注释（/* my comment */）。

参考文献：

  1. 在此处阅读有关CSS语法的更多信息：https : //www.w3schools.com/css/css_syntax.asp
  2. 在此处阅读有关“ HTML标签与元素”的信息。
  3. 我在GitHub markdown自述文件中做了很多HTML和CSS样式实践：https : //github.com/ElectricRCAircraftGuy/Arduino-STEM-Presentation
  4. 通过单击w3schools.com，我几乎了解了有关HTML和CSS的所有知识。以下是一些特定页面：
    1. %%%%% https://www.w3schools.com/howto/howto_css_image_center.asp
    2. https://www.w3schools.com/css/css_float.asp
      1. https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_float2
    3. https://www.w3schools.com/css/css3_images.asp
    4. https://www.w3schools.com/tags/default.asp
    5. HTML和CSS注释：https：//www.w3schools.com/css/css_comments.asp
  5. 我制造的射击直升机：https ://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html
— 加布里埃尔·斯台普斯
source
-15

这真的很简单。

-> This is centered Text <-

因此，请记住这一点，可以将其应用于img语法。

->![alt text](/link/to/img)<-
— vdclouis
source
3
Markdown的味道是什么？
— Wingman4l7
2
我也很好奇。这看起来像GitHub上的截图，但隆重的接待绝对没有实现这一点。你是怎么做的？您可以链接到GitHub上的文件吗？
— ELLIOTTCABLE
3
这是一个Jeckyll网站，因此GitHub甚至在进入存储库之前都会对其进行解析。
— vdclouis
5
仅供参考，以供所有人考虑举报以引起主持人注意：答案对您不起作用的事实并非举报的理由。只需发表评论和/或投票即可。我不会删除技术错误的答案。如果vdclouis因为社区发现它无用而希望自己删除它，那应该是他的选择。
— 科迪·格雷
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.