logo标签列表

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

githubmarkdown
568

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

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

Pandoc 提出了一种描述文本内容的通用语法，如果它成为 Markdown 标准的一部分，将有助于实现图像居中。 - Dave Jarvis
1
这个回答解决了你的问题吗？Markdown 和图片对齐。 - TylerH
18个回答
856

以下是来自GitHub支持的回复：

Markdown不允许您直接调整对齐方式（可以在此处查看文档：http://daringfireball.net/projects/markdown/syntax#img），但您可以使用原始HTML“img”标签，并使用内联CSS来进行对齐。

因此有可能对齐图像！ 您只需要使用内联CSS解决问题。您可以参考我的GitHub存储库中的示例。在README.md底部，有一个居中对齐的图像。为了简单起见，您可以按照以下步骤操作：

<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>
5
这似乎是有效的（如在发布者的存储库中所见），但是CSS在Github Wiki中不受支持。我尝试过指定CSS，但所有尝试都被删除了。同样，在我尝试在Wiki中执行此操作时，指定的_align_属性也被删除。 - Shawn South
3
GitHub对我来说没有起作用。<p align="center"><img src="image" /></p>和 <p style="align:center"><img src="image" /></p>以及使用a标签等方法都不行。 - logoff
5
似乎在HTML5中不支持align属性？（参考链接为：https://www.w3schools.com/tags/att_p_align.asp） - ostrokach
2
他们骗了你！我尝试使用class和style属性来使用CSS，但根本不起作用！而且是的，在HTML 4和XHTML标准中，align已被弃用... - Gucu112
5
我刚刚做了大量研究并写了一篇包含大量信息和解释的答案。这是今天正确的方法：https://dev59.com/42ct5IYBdhLWcg3wcs-G#62383408。 - Gabriel Staples
显示剩余9条评论
227

我一直在研究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，Visual Studio Web Essentials Markdown预览等）读取，则无法保证图像将居中。

注2：请记住，即使在GitHub网站内部，Markdown呈现方式也是不统一的。例如，维基页面不允许这种CSS定位技巧。

完整版

Markdown语法不能控制图像的位置。

实际上，允许这样的格式化几乎违反了Markdown的理念，正如"Philosophy"部分所述。

"Markdown格式的文档应该是可发布的纯文本，不会看起来像已经用标签或格式说明标记过一样。"

Markdown文件是通过使用Ruby Redcarpet库在github.com网站上呈现的。

Redcarpet提供一些扩展功能（例如删除线等），它们不属于标准Markdown语法，提供了额外的“功能”。然而，没有受支持的扩展可以使图像居中显示。

62
这个很好用：<img align="..." src="..." alt="...">。 - Nux
1
@JohonnyPauling，如果您担心使用GitHub带宽过多，可以看看Raw Git，它可以提供存储在GitHub上的文件，并将它们缓存在其系统中。因此，只需在GitHub上执行一次访问即可访问资源，从而节省了他们的带宽。 - danidemi
9
原始的Markdown会在跨度标签内处理Markdown语法。所以像下面这样的东西应该可以工作：<span style="display:block;text-align:center">![测试自动化](Automated-Testing.png)</span> - Dakshinamurthy Karra
11
HTML 4.01中的img标签上的align属性已被弃用，在HTML5中更是废除了。 - taylorthurlow
3
@Nux，这有什么好的？align不能取center值。 - x-yuri
显示剩余3条评论
69

TLDR:
请直接跳转到下面的部分查看4个示例（1.1、1.2、1.3和1.4），该部分名为"1.使用已弃用的HTML align属性在GitHub readme中居中和对齐图像"！

此外，您可以在我的存储库中的一些自述文件中查看实际示例：

  1. https://github.com/ElectricRCAircraftGuy/eRCaGuy_hello_world/blob/master/markdown/github_readme_center_and_align_images.md
  2. 和 https://github.com/ElectricRCAircraftGuy/eRCaGuy_hello_world#3-markdown
    1. enter image description here

有关如何在markdown中居中和对齐图像的背景：

事实证明，GitHub明确地阻止/过滤了所有尝试编辑任何形式的CSS（包括外部、内部和内联）在GitHub的*.md markdown文件中（例如readmes）。请参见这里（重点加粗）：

  1. 在Github仓库的readme.md中使用自定义CSS文件

    由于安全原因，GitHub不允许通过CSS影响README.md文件的CSS...

  2. https://github.community/t/github-flavored-markdown-doesnt-render-css-styles-inside-a-html-block/126258/2?u=electricrcaircraftguy

    不幸的是，您不能在GitHub markdown中使用CSS，因为它是清理过程的一部分。

    HTML被清理，积极地删除可能会伤害你和你的家人的东西，例如script标签，内联样式以及class或id属性。

    来源：https://github.com/github/markup

因此，在GitHub readme中居中或对齐图像的唯一解决方案是使用已弃用的HTML align属性（仍然有效），如此答案所示。

我还应该指出，尽管该解决方案确实有效，但该答案声称使用内联CSS来解决问题，这导致很多混淆，因为正如@Poikilos在评论中指出的那样，该答案根本没有CSS。相反，align="center"部分是<已弃用的HTML属性（仍然有效），而不是CSS。所有CSS，无论是外部，内部还是内联，都被禁止在GitHub readme中，并明确删除，这在试错和上述两个参考资料中指出。

这使我将我的答案分成两个答案：

  1. "使用已弃用的HTML align属性在GitHub自述文件中居中和对齐图像"
  2. "在任何你也可以控制CSS样式的Markdown文档中，使用现代CSS进行居中和对齐图像"

选项2仅适用于您完全控制CSS样式的地方，例如您创建的自定义GitHub Pages网站。

1. 居中和对齐图片在GitHub自述文件中使用不推荐的HTML align属性:

这适用于任何GitHub*.md markdown文件，例如GitHub readme.md文件。它依赖于不推荐使用的HTML align属性，但仍然有效。您可以在我的eRCaGuy_hello_world存储库的实际GitHub readme中查看此功能的完整演示：https://github.com/ElectricRCAircraftGuy/eRCaGuy_hello_world/blob/master/markdown/github_readme_center_and_align_images.md。

注意事项：

  1. 确保在以下每个<p>段落元素内设置width =" 100％ "，否则整个段落会尝试允许其周围的单词换行，导致奇怪且不可预测的效果。
  2. 要调整图像大小，只需设置width =" 30％ "或介于0％和100％之间的所需百分比即可获得所需的效果！这比尝试设置像width =" 200 "height =" 150 "这样的像素大小要容易得多，因为使用width百分比会自动调整到您的查看器屏幕和页面显示宽度，并且随着调整浏览器窗口的大小而自动调整图像大小。它还避免将图像扭曲成不自然的比例。这是一个很棒的功能！
  3. （弃用）HTML align属性的选项包括left、center、right和justify。

1.1. 左对齐、右对齐或居中对齐图像，无单词换行：

这个：

**Align left:**
<p align="left" width="100%">
    <img width="33%" src="https://istack.dev59.com/RJj4x.webp">
</p>

**Align center:**
<p align="center" width="100%">
    <img width="33%" src="https://istack.dev59.com/RJj4x.webp">
</p>

**Align right:**
<p align="right" width="100%">
    <img width="33%" src="https://istack.dev59.com/RJj4x.webp">
</p>

生成如下：

enter image description here

如果您想将文本设置为左、中或右对齐，也可以像常规HTML一样，在<p>元素内包含文本，如下所示：

<p align="right" width="100%">
    This text is also aligned to the right.<br>
    <img width="33%" src="https://istack.dev59.com/RJj4x.webp">
</p>

要生成这样的效果：

enter image description here

1.2. 对齐图像，左对齐、右对齐或居中，并进行换行：

这样做：

**Align left (works fine):**

<img align="left" width="33%" src="https://istack.dev59.com/RJj4x.webp">

[Arduino](https://en.wikipedia.org/wiki/Arduino) (/ɑːrˈdwiːnoʊ/) is an open-source hardware and software company, project and user community that designs and manufactures single-board microcontrollers and microcontroller kits for building digital devices. Its hardware products are licensed under a [CC-BY-SA][4] license, while software is licensed under the GNU Lesser General Public License (LGPL) or the GNU General Public License (GPL),[1] permitting the manufacture of Arduino boards and software distribution by anyone. Arduino boards are available commercially from the official website or through authorized distributors. Arduino board designs use a variety of microprocessors and controllers. The boards are equipped with sets of digital and analog input/output (I/O) pins that may be interfaced to various expansion boards ('shields') or breadboards (for prototyping) and other circuits.


**Align center (doesn't really work):**

<img align="center" width="33%" src="https://istack.dev59.com/RJj4x.webp">

[Arduino](https://en.wikipedia.org/wiki/Arduino) (/ɑːrˈdwiːnoʊ/) is an open-source hardware and software company, project and user community that designs and manufactures single-board microcontrollers and microcontroller kits for building digital devices. Its hardware products are licensed under a CC-BY-SA license, while software is licensed under the GNU Lesser General Public License (LGPL) or the GNU General Public License (GPL),[1] permitting the manufacture of Arduino boards and software distribution by anyone. Arduino boards are available commercially from the official website or through authorized distributors. Arduino board designs use a variety of microprocessors and controllers. The boards are equipped with sets of digital and analog input/output (I/O) pins that may be interfaced to various expansion boards ('shields') or breadboards (for prototyping) and other circuits.


**Align right (works fine):**

<img align="right" width="33%" src="https://istack.dev59.com/RJj4x.webp">

[Arduino](https://en.wikipedia.org/wiki/Arduino) (/ɑːrˈdwiːnoʊ/) is an open-source hardware and software company, project and user community that designs and manufactures single-board microcontrollers and microcontroller kits for building digital devices. Its hardware products are licensed under a CC-BY-SA license, while software is licensed under the GNU Lesser General Public License (LGPL) or the GNU General Public License (GPL),[1] permitting the manufacture of Arduino boards and software distribution by anyone. Arduino boards are available commercially from the official website or through authorized distributors. Arduino board designs use a variety of microprocessors and controllers. The boards are equipped with sets of digital and analog input/output (I/O) pins that may be interfaced to various expansion boards ('shields') or breadboards (for prototyping) and other circuits.

生成以下内容：

enter image description here

1.3. 将图像并排对齐：

提醒：一定要给整个<p>段落元素设置完整的100％列宽度（如下所示的width="100%"），否则文字会绕在它周围，从而破坏您可能试图保持的垂直对齐和垂直间距/格式！

这样做：

33% width each (_possibly_ a little too wide to fit all 3 images side-by-side, depending on your markdown viewer):
<p align="center" width="100%">
    <img width="33%" src="https://istack.dev59.com/RJj4x.webp">
    <img width="33%" src="https://istack.dev59.com/RJj4x.webp">
    <img width="33%" src="https://istack.dev59.com/RJj4x.webp">
</p>

32% width each (perfect size to just barely fit all 3 images side-by-side):
<p align="center" width="100%">
    <img width="32%" src="https://istack.dev59.com/RJj4x.webp">
    <img width="32%" src="https://istack.dev59.com/RJj4x.webp">
    <img width="32%" src="https://istack.dev59.com/RJj4x.webp">
</p>

31% width each:
<p align="center" width="100%">
    <img width="31%" src="https://istack.dev59.com/RJj4x.webp">
    <img width="31%" src="https://istack.dev59.com/RJj4x.webp">
    <img width="31%" src="https://istack.dev59.com/RJj4x.webp">
</p>

30% width each:
<p align="center" width="100%">
    <img width="30%" src="https://istack.dev59.com/RJj4x.webp">
    <img width="30%" src="https://istack.dev59.com/RJj4x.webp">
    <img width="30%" src="https://istack.dev59.com/RJj4x.webp">
</p>

生成以下内容：

enter image description here

我将所有段落<p>元素对齐到上方的center，但您也可以像之前的示例中所示一样对齐left或right，以强制图像行以那种方式对齐。例如：

这个：

Align the whole row of images to the right this time:
<p align="right" width="100%">
    <img width="25%" src="https://istack.dev59.com/RJj4x.webp">
    <img width="25%" src="https://istack.dev59.com/RJj4x.webp">
    <img width="25%" src="https://istack.dev59.com/RJj4x.webp">
</p>

生成这样的结果（根据上面设置的align属性对整行图像进行对齐，或在此情况下向右侧对齐）。通常情况下，我们建议使用center，就像上面的示例一样。

enter image description here

1.4. 使用Markdown表格改善奇异大小/形状的图片的垂直间距：

有时，使用“一排图片”的方法会产生略显尴尬的结果，特别是对于奇异大小或不同形状的图片。

以下代码生成两行具有良好水平间距但垂直间距较差的图像。这段代码：

<p align="center" width="100%">
    <img width="32%" src="photos/pranksta1.jpg">
    <img width="32%" src="photos/pranksta2.jpg">
    <img width="32%" src="photos/pranksta3.jpg">
</p>
<p align="center" width="100%">
    <img width="32%" src="photos/pranksta4.jpg">
    <img width="32%" src="photos/pranksta5.jpg">
    <img width="32%" src="photos/pranksta6.jpg">
</p>

由于第一行中的最后一张图片（"pranksta3.jpg"）是一张非常高的图片，其高度是其他图片的2倍，因此会产生这种效果：

Enter image description here

所以，将这两行图像放在一个Markdown表格中可以实现良好的垂直间距。请注意，在下面的Markdown表格中，每个图像都设置了HTML width属性为100%。这是因为它是相对于图像所在的表格单元格而不是相对于页面列宽度。由于我们希望每个图像填满每个单元格的整个宽度，因此我们将它们的宽度全部设置为width="100%"。
|                                               |                                               |                                               |
|-----------------------------------------------|-----------------------------------------------|-----------------------------------------------|
| <img width="100%" src="photos/pranksta1.jpg"> | <img width="100%" src="photos/pranksta2.jpg"> | <img width="100%" src="photos/pranksta3.jpg"> |
| <img width="100%" src="photos/pranksta4.jpg"> | <img width="100%" src="photos/pranksta5.jpg"> | <img width="100%" src="photos/pranksta6.jpg"> |

生成以下内容，我认为看起来更美观、更有间距，因为每一行图片的垂直间距也是居中的：

enter image description here

2. 使用现代CSS在任何你可以控制CSS样式的markdown文档中居中和对齐图片:

这适用于任何markdown文件，比如GitHub Pages网站，只要你有完全控制CSS样式。然而，这不适用于任何GitHub *.md markdown文件，如readme.md，因为GitHub明确扫描并禁用你尝试使用的所有自定义CSS样式。见上。

TLDR;

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

<img src="https://istack.dev59.com/RJj4x.webp"
     style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">

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

完成！

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

以下是各种 HTML 和 CSS 选项，只要不明确禁止 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://istack.dev59.com/RJj4x.webp)

或者在你的Markdown文件中使用HTML：

<img src="https://istack.dev59.com/RJj4x.webp">

...它将自动居中并调整为屏幕视图宽度的60％，如上面HTML和CSS中的注释所述。（当然，60％的大小也非常容易更改，并且我还将在下面提供按图像逐个进行操作的简单方法）。

2. 按照情况逐个居中和配置图像：

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

<img src="https://istack.dev59.com/RJj4x.webp" style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">

你也可以把它分成多行来格式化，像这样，并且它仍然有效：

<img src="https://istack.dev59.com/RJj4x.webp"
     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 */
            ">

将整个内容添加到您的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>

现在，您的img CSS块已将图像的默认设置设置为居中并占据屏幕空间宽度的60％，但是您可以使用leftAlign和rightAlign CSS类来逐个覆盖这些设置。例如，此图像将居中对齐且大小为60％（我上面设置的默认值）。
<img src="https://istack.dev59.com/RJj4x.webp">

这张图片将会使用我们刚刚创建的leftAlignCSS类进行左对齐，并且文字将会环绕在其右侧。

<img src="https://istack.dev59.com/RJj4x.webp" class="leftAlign">

可能会长成这样：

enter image description here

您仍然可以通过style属性覆盖任何CSS属性，例如宽度，如下所示：

<img src="https://istack.dev59.com/RJj4x.webp" class="leftAlign" style="width:20%">

现在你将得到这个：

enter image description here

4. 创建 3 个 CSS 类，但不要更改 img markdown 的默认设置

除了上面我们展示的修改默认的 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://istack.dev59.com/RJj4x.webp" class="centerAlign" style="width:20%">

注意我如何使用CSS style属性手动设置width属性，但如果我想要做更复杂的事情，我也可以创建一些额外的类似于这样的类，将它们添加在上面的<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://istack.dev59.com/RJj4x.webp" 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也是如此。Markdown是高级语言，会被解释为HTML和CSS。但是，当我们需要额外的控制时，我们可以在Markdown文件中“内联”低级别的HTML和CSS，它仍然会被正确解释。因此，在某种程度上，HTML和CSS是有效的“Markdown”语法。

因此，要在Markdown中居中显示图像，请使用HTML和CSS。

2. 在Markdown中插入标准图像：

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

这个Markdown:

![](https://istack.dev59.com/RJj4x.webp)

将产生以下输出:

这是我制作的喷火六旋翼无人机。

你还可以选择在方括号中添加描述。说实话，我甚至不确定那是什么意思，但也许它会转换成HTML <img>元素的alt属性，如果图像无法加载，则会显示该属性，并且可能被屏幕阅读器用于盲人阅读。因此，这个markdown：

![this is my hexacopter I built](https://istack.dev59.com/RJj4x.webp)

也将产生这个输出：

this is my hexacopter I built

3. 关于在markdown中居中和调整图片大小时HTML/CSS的详细说明：

在markdown中居中图片需要使用HTML和CSS直接提供的额外控制。您可以像这样插入和居中单个图像：

<img src="https://istack.dev59.com/RJj4x.webp"
     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. “style”属性接受CSS样式，因此这里双引号内的所有内容：style = ""都是CSS property:value键值“声明”。
    1. 请注意，每个CSS“property:value declaration”都由分号（;）分隔，而此“元素”中的每个HTML“attribute”都由空格（ ）分隔。
  6. 为了使图像在我们的HTML和CSS代码中居中，关键的“attributes”只是src和style。
  7. alt是可选的。
  8. 在接受CSS样式的HTML style属性内，关键声明都是我展示的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. GeeksForGeeks: HTML | <p>对齐属性
  2. 在这里阅读有关CSS语法的更多信息：https://www.w3schools.com/css/css_syntax.asp
  3. 在这里阅读有关"HTML标签与元素的区别"的更多信息。
  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
33
我很确定这是我在Stack Overflow上看到的最长回答... - craastad
2
将文本与其右侧的图像对齐对于 GIF 格式的图像无效。 - Omar Dulaimi
1
@OmarDulaimi，我不同意。我刚做了一个全面的测试。请看这里的部分和屏幕截图：普通图片（PNG、JPG等）与 GIF 动画比较 。GIF 动画与 PNG 或 JPG 文件完全相同。将 此文件 和 此文件 并排放置以自行查看。 - Gabriel Staples
1
@OmarDulaimi，你是否有语法错误导致gif无法正常工作？ - Gabriel Staples
1
一周前我尝试了你在这里展示的所有例子，它们都可以正常工作。每一个都是如此。除非是gif格式的，否则它拒绝向右对齐文本。但今天在尝试你的右对齐示例后，一切都正常了！所以我认为这可能是Github方面做出的更改或其他原因，因为他们最近确实进行了一些更改。感谢你详尽的回答。 - Omar Dulaimi
1
我会点赞这个回答，因为我相信写这个回答花了很长时间 :) - Zoran Pandovski
60

或者，如果您可以控制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文档的通用样式问题。
2
这个方法很好，但是使用锚点(#)代替查询字符串(?)可能是更好的解决方案，就像我在这个答案中提到的：https://dev59.com/TnVC5IYBdhLWcg3wjx5d#43691462 - 然而，我不认为Github的readme.md支持定义CSS。 - tremor
1
适合那些运行自己的GitLab实例的完美解决方案！ - Xunnamius
48

对于左对齐

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

如果您觉得这篇文章有用，可以在此处fork它以备将来参考。

4
点赞。不过，你的三个例子中的文本都是围绕着图像换行的形式呈现的。我不喜欢那种方式，所以经过大量的研究和实验，我已经修复了这个问题，并添加了带有和不带有文本换行、左对齐、居中和右对齐、以及单行多个图像的示例。我还在一个实际的 Github 存储库中进行了测试。你可以在这里查看我的答案。 - Gabriel Staples
38

它在GitHub上对我有效

<p align="center">
    <img src="...">
</p>
25
我们可以使用以下方法。如果图片无法加载，请将图片的src位置从Git文件夹更改，并添加备用文本：
 <p align="center">
    <img src="your image URL here" alt="alternate text">
 </p>
关于“从Git文件夹中”，您是指“从GitHub文件夹中”吗？无论如何，您能详细说明一下您的意思吗？请通过编辑（更改）您的答案来回复，而不是在此处留言（不要添加“编辑：”、“更新：”或类似内容 - 答案应该看起来像是今天写的）。 - Peter Mortensen
这对于代码库非常有效。 - Muhammad Ali
19

我解决图片定位问题的方法是使用HTML属性:

My way to resolve the problem with image positioning was to use the HTML attributes:

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

图片已经被正确地调整大小并居中显示，至少在我的本地Visual Studio Community Markdown渲染器中是这样的。

然后，我将更改推送到了存储库，不幸地发现它 在GitHub README.md文件中无法正常工作。尽管如此，我还是会保留这个答案，因为它可能会帮助其他人。

所以最终，我选择使用老式的HTML标签：

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

但是猜猜怎么样？一些JavaScript方法替换了我的style属性！我甚至尝试过class属性，结果也一样！

然后我发现了下面这个代码片段页面，甚至使用了更老式的HTML：

<p align="center">
    <img src="Image.svg" alt="Image" width="800" height="600" />
</p>
这一个运作良好，我希望不再添加评论就把它留下...
1
关于“Visual Studio”：您是指 Visual Studio Code 吗？如果是，请通过编辑（更改）您的答案来回复，而不是在评论中回复（不要加上“Edit:”，“Update:”或类似的字眼 - 答案应该看起来像是今天写的）。 - Peter Mortensen
@PeterMortensen，实际上我忘记了这项调查是在我的C#项目中完成的，该项目是通过Visual Studio Community版实现的。我已将其更改为编辑器的正确名称。 - Gucu112
10

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

<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页面都有效。

8

只需打开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”> [ 在此处输入您的内容 ] </div> 会根据页面的尺寸将所有内容居中显示。

在 GitLab 的 ReadME 页面上，只使用 div 容器是正确的做法。 - abdev
小修正：s/b src="https://newfastuff.com/wp-content/uploads/2019/05/bW7QXVB.png"。否则，完美运行。 - DaveL17
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接