如何在 GitHub 上的 README.md 文件中将图像居中？

Question

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

这可能吗？如果是这样，我该怎么做？

Answer 1

这是来自 GitHub 的支持：

嘿，瓦尔迪，

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

干杯，

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

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

虽然，作为nulltoken said，这将与 Markdown 理念相悖！

---

此代码来自my README file：

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

Answer 2

我一直在查看 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 的呈现方式也不统一。例如，wiki 不允许这种 CSS 位置欺骗。

未删节版

Markdown syntax 不提供控制图像位置的能力。

事实上，如 "Philosophy" 部分所述，允许这样的格式是与 Markdown 理念相悖的。

“Markdown 格式的文档应该可以按原样以纯文本形式发布，而不是看起来像是用标签或格式说明进行了标记。”

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

Redcarpet 公开了一些 extensions（例如删除线），它们不是标准 Markdown 语法的一部分，并提供了额外的“功能”。但是，没有支持的扩展允许您将图像居中。

Answer 3

或者，如果您可以控制 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 内容没有额外代码。当然，如果其他人在其他地方使用 Markdown，您无法控制会发生什么，但这是所有 Markdown 文档共享的一般样式问题。

Answer 4

对于左对齐

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

如果您觉得这很有用，请转发here 以供将来参考。

Answer 5

它在 GitHub 上对我有用

<p align="center">
    <img src="...">
</p>

Answer 6

TLDR：
只需直接跳下来查看下面名为 "1 的部分中的 4 个示例（1.1、1.2、1.3 和 1.4）。使用已弃用的 HTML @ 在 GitHub 自述文件中居中和对齐图像 987654372@属性”！

另外，在我的存储库中的几个自述降价文件中查看 GitHub 上的实际示例：

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

关于如何在 Markdown 中居中和对齐图像的背景：

因此，事实证明 GitHub 明确阻止/过滤了所有在 GitHub *.md 内编辑任何形式的 CSS（级联样式表）样式（包括 external, internal, and inline）的尝试 markdown 文件，例如自述文件。 请参见此处（已添加重点）：

1. Custom css file for readme.md in a Github repo

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

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 标签、inline-styles 和 class 或 id 属性。

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

因此，这意味着在 GitHub 自述文件中居中或对齐图像，您唯一的解决方案是使用 deprecated HTML align attribute（它恰好仍然可以使用），如 this answer 所示。

我还应该指出，尽管该解决方案确实有效，但声称使用 inline css to solve the problem 的答案引起了很多混乱，因为就像 @Poikilos 在 cmets 中指出的那样，该答案没有 CSS无论如何。相反，<p> 元素的 align="center" 部分是 deprecated HTML attribute （恰好仍然起作用）并且不是 CSS。所有 CSS，无论 external, internal, or inline 是否被 GitHub 自述文件禁止并明确删除，如通过反复试验和上述两个参考所示。

这导致我在这里将我的答案分成两个答案：

1. “使用已弃用的 HTML align 属性在 GitHub 自述文件中居中和对齐图像”，以及
2. “在您还可以控制 CSS 样式的任何 Markdown 文档中使用现代 CSS 使图像居中和对齐”。

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

---

1. 在 GitHub 自述文件中 使用已弃用的 HTML align 属性居中和对齐图像：

这适用于任何 GitHub *.md 降价文件，例如 GitHub readme.md 文件。它依赖于已弃用的 HTML align 属性，但仍然可以正常工作。您可以在我的 eRCaGuy_hello_world 存储库中的实际 GitHub 自述文件中查看完整演示：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. (deprecated) HTML align attribute 的选项包括 left、center、right 和 justify。

1.1。将图像左对齐、右对齐或居中对齐，无需自动换行：

这个：

**Align left:**
<p align="left" width="100%">
    <img width="33%" src="https://i.stack.imgur.com/RJj4x.png">
</p>

**Align center:**
<p align="center" width="100%">
    <img width="33%" src="https://i.stack.imgur.com/RJj4x.png">
</p>

**Align right:**
<p align="right" width="100%">
    <img width="33%" src="https://i.stack.imgur.com/RJj4x.png">
</p>

产生这个：

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

<p align="right" width="100%">
    This text is also aligned to the right.<br>
    <img width="33%" src="https://i.stack.imgur.com/RJj4x.png">
</p>

制作这个：

1.2.使用自动换行将图像左对齐、右对齐或居中对齐：

这个：

**Align left (works fine):**

<img align="left" width="33%" src="https://i.stack.imgur.com/RJj4x.png">

[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://i.stack.imgur.com/RJj4x.png">

[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://i.stack.imgur.com/RJj4x.png">

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

产生这个：

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://i.stack.imgur.com/RJj4x.png">
    <img width="33%" src="https://i.stack.imgur.com/RJj4x.png">
    <img width="33%" src="https://i.stack.imgur.com/RJj4x.png">
</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://i.stack.imgur.com/RJj4x.png">
    <img width="32%" src="https://i.stack.imgur.com/RJj4x.png">
    <img width="32%" src="https://i.stack.imgur.com/RJj4x.png">
</p>

31% width each:
<p align="center" width="100%">
    <img width="31%" src="https://i.stack.imgur.com/RJj4x.png">
    <img width="31%" src="https://i.stack.imgur.com/RJj4x.png">
    <img width="31%" src="https://i.stack.imgur.com/RJj4x.png">
</p>

30% width each:
<p align="center" width="100%">
    <img width="30%" src="https://i.stack.imgur.com/RJj4x.png">
    <img width="30%" src="https://i.stack.imgur.com/RJj4x.png">
    <img width="30%" src="https://i.stack.imgur.com/RJj4x.png">
</p>

产生这个：

我将上面的所有段落 <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://i.stack.imgur.com/RJj4x.png">
    <img width="25%" src="https://i.stack.imgur.com/RJj4x.png">
    <img width="25%" src="https://i.stack.imgur.com/RJj4x.png">
</p>

产生这个（根据上面设置的align 属性对齐整行图像，或在本例中为right）。通常，center 是首选，如上面的示例中所做的那样。

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>

产生这个，因为第 1 行中的最后一张图像（“pranksta3.jpg”）是一个非常高的图像，其高度是其他图像的 2 倍：

因此，将这两行图像放置在降价表中会强制使用美观的垂直间距。请注意，在下面的降价表中，每个图像都设置了 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"> |

在我看来，它看起来更好，间距也更好，因为每行图像的垂直间距也居中：

---

2.在您还可以控制 CSS 样式的任何 Markdown 文档中使用现代 CSS 将图像居中和对齐：

这适用于任何 Markdown 文件，例如 GitHub Pages 网站，您可以完全控制 CSS 样式。这不适用于任何 GitHub *.md 降价文件，例如 readme.md，因此，因为 GitHub 显式扫描并禁用您尝试使用的所有自定义 CSS 样式。见上文。

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

将width CSS 值更改为您想要的任何百分比，或者完全删除它以使用降价默认大小，如果图像大于屏幕，我认为它是屏幕宽度的 100%，或者它是否则为实际图像宽度。

完成！

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

以下是各种 HTML 和 CSS 选项，它们可以在 markdown 文件中完美运行，只要 CSS 没有被明确禁止：

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

只需将其复制并粘贴到 Markdown 文件的顶部，以居中并调整文件中所有图像的大小（然后只需使用正常的 Markdown 语法插入您想要的任何图像）：

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

或者，这里是与上面相同的代码，但带有详细的 HTML 和 CSS cmets 来准确解释发生了什么：

<!-- (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 中的 cmets 所述。 （当然，60% 的大小也很容易改变，我在下面也提供了逐个图像的简单方法）。

2.根据具体情况集中和配置图像，一次一个：

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

<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 样式 classes 来帮助对单个图像进行样式化：

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

<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://i.stack.imgur.com/RJj4x.png">

此图像将左对齐，但是，使用我们刚刚在上面创建的leftAlign CSS 类将文本环绕在其右侧！

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

它可能看起来像这样：

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

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

现在你会得到这个：

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://i.stack.imgur.com/RJj4x.png" class="centerAlign" style="width:20%">

注意我是如何使用上面的 CSS style 属性手动设置 width 属性的，但是如果我想做一些更复杂的事情，我还可以创建一些像这样的额外类，将它们添加到 @987654442 中上面的@块：

/* 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 */
}

现在您可以将多个类分配给同一个对象，就像这样。只需separate class names by a space, NOT a comma。在设置冲突的情况下，我相信最后出现的任何设置都会生效，覆盖任何先前设置的设置。如果您在同一个 CSS 类或同一个 HTML style 属性中多次设置相同的 CSS 属性，情况也应该如此。

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

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

最后一个技巧是我在这个答案中学到的：How can I use CSS to style multiple images differently?。正如您在上面看到的，所有 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 中的标准图片插入：

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

这个降价：

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

将产生这个输出：

这是my fire-shooting hexacopter I made。

您还可以选择在左方括号中添加说明。老实说，我什至不确定那是做什么的，但也许它会转换为HTML <img> element alt attribute，以防图像无法加载，并且可以由盲人的屏幕阅读器读取。所以，这个降价：

![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"element"。
3. HTML img "tags"/"elements" 用于将图像插入 HTML。
4. 元素内的每个分配都在配置一个 HTML“attribute”。
5. "style" 属性 接受 CSS 样式，因此此处双引号内的所有内容：style="" 是 CSS property:value key-value "声明”。
   1. 请注意，每个 CSS“property:value 声明”由分号分隔 (;)，而此“元素”中的每个 HTML“属性”由空格分隔 ( )。
6. 要使图像在我们上面的 HTML 和 CSS 代码中居中，关键的“属性”就是 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 风格的 cmets (/* my comment */)。

参考：

1. GeeksForGeeks: HTML | <p> align Attribute
2. 在此处阅读有关 CSS 语法的更多信息：https://www.w3schools.com/css/css_syntax.asp
3. 阅读"HTML Tags vs Elements" here。
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 cmets：https://www.w3schools.com/css/css_comments.asp
5. 我做的射击六轴飞行器：https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html

Answer 7

我们可以使用以下内容。请更改 Git 文件夹中图像的 src 位置，如果图像未加载，请添加替代文本：

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

Answer 8

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

![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 属性并得到相同的结果！

然后我发现gist page 使用了更多老式 HTML：

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

但是这个工作正常，我想离开它而不需要进一步的 cmets...

Answer 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 页面。

Answer 10

只需转到 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> 适合页面中的所有内容，并根据页面尺寸居中对齐。

Answer 11

要稍微扩展答案以支持本地图像，只需替换 FILE_PATH_PLACEHOLDER 为您的图像路径并检查它。

<p align="center">
  <img src="FILE_PATH_PLACEHOLDER">
</p>

Answer 12

可以处理此问题的“纯”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>

Answer 13

如果修改图片对您来说不是问题，并且

如果您知道将显示您的降价的容器的大致宽度，并且

如果您的图片仅在一个地方使用（例如仅在 GitHub 中使用的 README），

然后您可以在图像编辑器中编辑您的图像并在两侧均匀填充。

填充前：

填充后：

原图（宽度 = 250px）：

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

Answer 14

这真的很简单。

-> This is centered Text <-

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

->![alt text](/link/to/img)<-