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

Question

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

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

score 739 · Accepted Answer

这是来自 GitHub 的支持：

嘿，瓦尔迪，

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

干杯，

所以可以对齐图像！你只需要使用内联 CSS 来解决问题。您可以从我的GitHub 存储库中获取示例。在 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 上查看时居中：

<p align="center">
  <img src="https://github.com/waldyr/Sublime-Installer/blob/master/sublime_text.png?raw=true" alt="Sublime's custom image"/>
</p>

score 202 · Accepted Answer

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

TL;博士

不，你不能仅仅依靠 Markdown 语法。Markdown 不关心定位。

注意：一些 Markdown 处理器支持包含 HTML（正如 @waldyr.ar 正确指出的那样），在 GitHub 案例中，您可能会回退到<div style="text-align:center"><img src="..." /></div>.

请注意，如果您的存储库是在不同的托管环境（ CodePlex、Bitbucket等）中创建的，或者如果不是通过浏览器读取文档（Sublime Text Markdown preview、MarkdownPad、Visual Studio Web ），则无法保证图像会居中Essentials Markdown 预览，...)。

注意 2：请记住，即使在 GitHub 网站内，Markdown 的呈现方式也不统一。例如，wiki 不允许这种 CSS 位置欺骗。

未删减版

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

事实上，正如“哲学”部分所述，允许这样的格式化是与 Markdown 哲学相悖的。

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

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

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

score 51 · Accepted Answer

或者，如果您可以控制 CSS 内容，则可以巧妙地使用URL 参数和 CSS。

降价：

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

和 CSS：

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

您可以通过这种方式创建各种样式选项，并且仍然保持 Markdown 内容没有额外代码。当然，如果其他人在其他地方使用 Markdown，您无法控制会发生什么，但这是所有 Markdown 文档共享的一般样式问题。

score 48 · Accepted Answer

对于左对齐

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

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

score 39 · Accepted Answer

TLDR：直接跳下来看看下面称为“1.使用已弃用的 HTML属性在 GitHub 自述文件中居中和对齐图像”一
节中的 4 个示例（1.1、1.2、1.3 和 1.4）！align

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

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

因此，事实证明，GitHub 明确阻止/过滤了所有在 GitHub降价文件（例如自述文件）中编辑任何形式的 CSS（级联样式表）样式（包括外部、内部和内联）的尝试。*.md见这里（强调补充）：

Github 存储库中 readme.md 的自定义 css 文件

出于安全原因，GitHub 不允许CSS通过CSS影响 README.md 文件...
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 自述文件中居中或对齐图像，您唯一的解决方案是使用已弃用的 HTMLalign属性（该属性碰巧仍然有效），如此答案所示。

我还应该指出，尽管该解决方案确实有效，但声称使用该答案会引起很多混乱inline css to solve the problem，因为就像@Poikilos 在评论中指出的那样，该答案中没有任何 CSS。相反，元素的align="center"一部分是一个已弃用的 HTML 属性（碰巧仍然有效），而不是 CSS。所有 CSS，无论是外部的、内部的还是内联的，都被 GitHub 自述文件禁止并明确删除，如通过反复试验和上述两个参考所示。<p>

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

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

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

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

这适用于任何 GitHub*.md降价文件，例如 GitHubreadme.md文件。它依赖于已弃用的 HTMLalign属性，但仍然可以正常工作。您可以在我的 eRCaGuy_hello_world 存储库中的实际 GitHub 自述文件中查看完整演示：https ://github.com/ElectricRCAAircraftGuy/eRCaGuy_hello_world/blob/master/markdown/github_readme_center_and_align_images.md 。

笔记：

请务必width="100%"在下面的每个<p>段落元素中设置，否则整个段落会尝试允许自动换行，从而导致奇怪且难以预测的效果。
要调整图像大小，只需将width="30%"或任何您想要的百分比设置在 0% 和 100% 之间，即可获得所需的效果！这比尝试设置像素大小（例如）要容易得多，width="200" height="150"因为使用width百分比会自动调整到查看器的屏幕和页面显示宽度，并且会在您调整浏览器窗口大小时自动调整图像大小。它还避免了将图像扭曲成不自然的比例。这是一个很棒的功能！
（已弃用）HTMLalign属性的选项包括left、center、right和justify.

1.1。使用 NO WORD WRAP 将图像左对齐、右对齐或居中对齐：

这：

**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上面设置的属性对齐整行图像，或者在这种情况下向右对齐）。通常，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 倍：

因此，将这两行图像放在一个降价表中会强制使用漂亮的垂直间距。请注意，在下面的降价表中，每个图像都设置了一个 HTMLwidth属性设置为 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 在您还可以控制 CSS 样式的任何 Markdown 文档中居中和对齐图像：

这适用于任何 Markdown 文件，例如GitHub Pages网站，您可以完全控制 CSS 样式。这不适用于任何 GitHub*.md降价文件，例如 a 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%">

将 CSS 值更改为width您想要的任何百分比，或者将其完全删除以使用 markdown 默认大小，如果图像大于屏幕，我认为它是屏幕宽度的 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 注释来准确解释发生了什么：

<!-- (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)

或您的降价文件中的 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 样式类来帮助对单个图像进行样式化：

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

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

这张图片将是左对齐的，但是，使用leftAlign我们刚刚在上面创建的 CSS 类，文本会在它的右边换行！

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

它可能看起来像这样：

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

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

现在你会得到这个：

4. 创建 3 个 CSS 类，但不要更改`img`markdown 默认值

我们刚刚在上面展示的另一个选项，我们修改了默认img property:value设置并创建了 2 个类，是只保留所有默认的 Markdownimg属性，但创建 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使用上面的 CSSstyle属性手动设置属性的，但是如果我想做一些更复杂的事情，我还可以创建一些像这样的额外类，将它们添加到上面的<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 属性中多次设置相同的 CSS 属性，情况也应该如此style。

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

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

最后一个技巧是我在这个答案中学到的：如何使用 CSS 以不同的方式设置多个图像的样式？. 正如您在上面看到的，所有 3 个 CSSalign类都将图像宽度设置为 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>

参考：

GeeksForGeeks：HTML | <p>对齐属性
在此处阅读有关 CSS 语法的更多信息：https ://www.w3schools.com/css/css_syntax.asp
在此处阅读“HTML 标签与元素”。
通过点击 w3schools.com，我了解了有关 HTML 和 CSS 的所有知识。以下是一些具体的页面：
我制作的射击六轴飞行器：https ://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html

score 38 · Accepted Answer

38

它在 GitHub 上对我有用

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

于 2017-05-20T18:39:58.090 回答

score 18 · Accepted Answer

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

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

score 13 · Accepted Answer

我解决图像定位问题的方法是使用 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属性并得到相同的结果！

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

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

然而，这个工作正常，我想留下它而不做进一步评论......

score 10 · Accepted Answer

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

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

score 8 · Accepted Answer

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

score 3 · Accepted Answer

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

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

score 0 · Accepted Answer

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

score -1 · Accepted Answer

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

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

如果您的图像仅在一个地方使用（例如仅在 GitHub 中使用的自述文件），

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

填充前：

填充后：

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

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

score -17 · Accepted Answer

这真的很简单。

-> This is centered Text <-

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

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

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

14 回答 14

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

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

1.1。使用 NO WORD WRAP 将图像左对齐、右对齐或居中对齐：

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

1.3. 并排对齐图像：

1.4. 使用 Markdown 表来改善奇数尺寸/奇数形状图像的垂直间距：

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

TLDR；

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

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

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

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

4. 创建 3 个 CSS 类，但不要更改`img`markdown 默认值

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

更多细节：

1. 我对 Markdown 中 HTML 和 CSS 的思考

2、markdown中的标准图片插入：

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

参考：

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

14 回答 14

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

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

1.1。使用 NO WORD WRAP 将图像左对齐、右对齐或居中对齐：

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

1.3. 并排对齐图像：

1.4. 使用 Markdown 表来改善奇数尺寸/奇数形状图像的垂直间距：

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

TLDR；

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

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

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

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

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

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

更多细节：

1. 我对 Markdown 中 HTML 和 CSS 的思考

2、markdown中的标准图片插入：

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

参考：

Related

Reference

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

4. 创建 3 个 CSS 类，但不要更改`img`markdown 默认值