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

P

Peter Mortensen

这是来自 GitHub 的支持：

嘿 Waldyr，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>

这似乎有效（如海报的回购所示），但 Github wiki 不支持 CSS。我为指定 CSS 所做的每一次尝试都已被删除。同样，当我尝试在 wiki 中执行此操作时，指定的 align 属性也会被删除。

在 GitHub 中对我不起作用。 <p align="center"><img src="image" /></p> 也不是 <p style="align:center"><img src="image" /></p> 也不是带有 a 标记等。

align 属性似乎是 not supported in HTML5？

他们骗了你！我尝试通过 class 和 style 属性使用 CSS，但它根本不起作用！是的，align 在 HTML 4 和 XHTML 标准附近被弃用了……

我只是做了大量的研究，并用大量的信息和解释写了这个重要的答案。这是今天的正确方法：stackoverflow.com/a/62383408/4561887。

P

Peter Mortensen

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

TL;博士

不，你不能仅仅依靠 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 语法的一部分，并提供了额外的“功能”。但是，没有支持的扩展允许您将图像居中。

这很好用：<img align="..." src="..." alt="...">

@JohonnyPauling，如果您担心不使用过多的 github 带宽，您可以查看 Raw Git，它提供存储在 GitHub 上的文件，并将它们缓存在他们的系统上。因此，只对 GitHub 上的资源执行一次访问，从而节省了带宽。

原始 markdown 处理 span 标签内的 markdown 语法。所以像下面这样的东西应该可以工作：<span style="display:block;text-align:center">![Test Automation]Automated-Testing.png)</span>

img 标记上的 align 属性自 HTML 4.01 起已弃用，自 HTML5 起已过时。

@Nux 有什么好处？ align 不采用 center 值。

P

Peter Mortensen

或者，如果您可以控制 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 文档共享的一般样式问题。

这很好用，但是在查询字符串 (?) 上使用锚点 (#) 可能是更好的解决方案，正如我在此答案中发布的那样：stackoverflow.com/questions/255170/markdown-and-image-alignment/… - 但是我不相信 github readme.md 支持定义 css。

对于那些运行自己的 GitLab 实例的人来说，这是完美的解决方案！

G

Gabriel Staples

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

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

https://github.com/ElectricRCAircraftGuy/eRCaGuy_hello_world/blob/master/markdown/github_readme_center_and_align_images.md 和 https://github.com/ElectricRCAircraftGuy/eRCaGuy_hello_world#3-markdown

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

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

出于安全原因，Github repo GitHub 中 readme.md 的自定义 css 文件不允许 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 被清理，积极地删除可能伤害您和您的亲属的东西 - 例如脚本标签、内联样式以及类或 id 属性。来源：https://github.com/github/markup

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

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

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

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

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

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

这适用于任何 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。

笔记：

请务必在下面的每个

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

产生这个：

https://i.stack.imgur.com/JSSk4.png

如果您想将文本本身设置为左、中或右，您也可以将文本包含在 <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>

要产生这个：

https://i.stack.imgur.com/llVTE.png

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.

产生这个：

https://i.stack.imgur.com/dYpvF.png

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>

产生这个：

https://i.stack.imgur.com/gzMc3.jpg

我将上面的所有段落 <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 是首选，如上述示例中所做的那样。

https://i.stack.imgur.com/mfc5Z.png

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

https://i.stack.imgur.com/9ze5X.jpg

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

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

https://i.stack.imgur.com/QikmC.jpg

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

这适用于任何 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 注释来准确解释发生了什么：

<!-- (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> 块复制并粘贴到您的降价文件的顶部，这也将起作用，因为它会覆盖并优先于您可能在上面设置的任何文件范围样式设置：

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

现在，您的 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">

它可能看起来像这样：

https://i.stack.imgur.com/jaU2j.png

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

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

现在你会得到这个：

https://i.stack.imgur.com/uS5FK.png

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 属性的，但如果我想做一些更复杂的事情，我还可以创建一些类似这样的额外类，将它们添加到上面的 <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 */
}

现在您可以将多个类分配给同一个对象，就像这样。只需 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 的思考

就我而言，任何可以写在降价文档中并获得所需结果的东西都是我们所追求的，而不是一些“纯降价”语法。

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

将产生这个输出：

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)

也会产生这个输出：

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

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

上面代码的是 HTML 的“结束标签”。从开始标签到结束标签的所有内容，包括在内，都构成了这个 HTML img“元素”。 HTML img "tags"/"elements" 用于将图像插入 HTML。元素内的每个分配都配置了一个 HTML“属性”。 "style" 属性接受 CSS 样式，因此这里双引号内的所有内容：style="" 都是 CSS 属性：值键值“声明”。请注意，每个 CSS“属性：值声明”由分号 (;) 分隔，而此“元素”中的每个 HTML“属性”由空格 () 分隔。为了让图像在我们上面的 HTML 和 CSS 代码中居中，关键的“属性”就是 src 和 style 。另一种是可选的。在接受 CSS 样式的 HTML 样式属性中，关键声明都是我展示的 4 个：display:block、float:none、margin-left:auto 和 margin-right:auto。如果之前没有设置过 float 属性，那么您可以省略此声明，但最好还是保留它以防万一。如果首先在这里学习了如何使用 HTML 和 CSS 使图像居中：https://www.w3schools.com/howto/howto_css_image_center.asp。 CSS 使用 C 风格的注释（/* 我的注释 */）。

参考：

GeeksForGeeks：HTML |

align 属性在此处阅读有关 CSS 语法的更多信息：https://www.w3schools.com/css/css_syntax.asp 在此处阅读有关“HTML 标签与元素”的信息。通过点击 w3schools.com，我了解了有关 HTML 和 CSS 的所有知识。这里有几个具体的页面：%%%%%https://www.w3schools.com/howto/howto_css_image_center.asp https://www.w3schools.com/css/css_float.asp https://www.w3schools.com /css/tryit.asp?filename=trycss_layout_float2 https://www.w3schools.com/css/css3_images.asp https://www.w3schools.com/tags/default.asp HTML 和 CSS 注释：https://www .w3schools.com/css/css_comments.asp 我制作的射击六轴飞行器：https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html

我很确定这是我在 Stack Overflow 上看到的最长的答案......

将文本与右侧的图像对齐不适用于 gif。

@OmarDulaimi，我不同意。我刚刚做了一个完整的测试。在此处查看此部分和屏幕截图：Regular images (PNG, JPG, etc) vs GIFs。 GIF 的工作方式与 PNG 或 JPG 文件完全相同。并排比较 this file 和 this file 以亲自查看。

@OmarDulaimi，您是否有语法错误阻止您的 gif 正常工作？

@GabrielStaples 一周前，我尝试了您在此处展示的所有示例，它们都有效。他们每一个人。除非是 gif，否则它拒绝与文本对齐。但是今天在尝试了您的右对齐示例之后，一切正常！所以我认为这可能是在 Github 方面进行的更改或其他方面的更改，因为他们最近确实进行了一些更改。感谢您的详尽回答。

G

Gabriel Staples

对于左对齐

 <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 以供将来参考。

赞成。但是，您的所有 3 个示例都在图像周围有文字自动换行。我不喜欢这样，所以经过大量的研究和实验，我已经修复并添加了带有和不带有自动换行的示例，左对齐、居中对齐和右对齐，以及多个图像在一个单行。然后我对它进行了全部测试in an actual github repo I made。您可以看到 my answer here。

P

Peter Mortensen

它在 GitHub 上对我有用

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

S

Suneet Patil

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

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

Re“来自 Git 文件夹”：你的意思是 “来自 GitHub 文件夹”？无论如何，你能详细说明你的意思吗？请通过 editing (changing) your answer 回复，而不是在评论中（没有“编辑：”、“更新：”或类似内容 - 答案应该看起来好像是今天写的）。

G

Gucu112

我解决图像定位问题的方法是使用 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>

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

关于“Visual Studio”：你的意思是Visual Studio Code吗？如果是这样，请通过 editing (changing) your answer 回复，而不是在评论中（without "Edit:"、"Update:" 或类似的 - 答案应该看起来像今天写的）。

@PeterMortensen 实际上我忘记了这项调查是在我的 C# 项目中完成的，该项目是通过 Visual Studio 社区版实现的。我已将其更改为编辑器的正确名称。

k

khyox

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

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

M

Maruf Hassan

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

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

https://i.stack.imgur.com/y9BMa.png

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

仅使用 div 容器在 GitLab ReadME 页面上正确执行

小修正：s/b src="https://newfastuff.com/wp-content/uploads/2019/05/bW7QXVB.png"。否则，工作一种享受。

P

Peter Mortensen

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

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

哪个答案？发布此答案时，有五个未删除的答案。还是您的意思是“答案”？请通过 editing (changing) your answer 回复，而不是在评论中（没有“编辑：”、“更新：”或类似内容 - 答案应该看起来好像是今天写的）。

P

Peter Mortensen

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

这似乎不起作用：表格的宽度由其内容的宽度决定。它还在图像周围放置了一个边框（根据 github 的默认样式表）。

我没有意识到它做到了。在 GitHub 之外，这就是我在 markdown 中居中图像的方式。

赞成，因为您在这里的回答有助于我的 1.4 部分。使用降价表来改善奇怪尺寸/奇怪形状图像的垂直间距，我刚刚添加了 to my answer here。

P

Peter Mortensen

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

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

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

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

填充前：

https://i.stack.imgur.com/uEi2Z.png

填充后：

https://i.stack.imgur.com/w07oi.png

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

https://i.stack.imgur.com/jlvCF.png

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

https://i.stack.imgur.com/weiMm.png

P

Peter Mortensen

这真的很简单。

-> This is centered Text <-

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

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

那是什么味道的 Markdown？

我也很好奇这里。这看起来像是 GitHub 的屏幕截图，但 Redcarpet 绝对没有实现它。你是怎么做的？你能链接到 GitHub 上的文件吗？

这是一个 Jeckyll 站点，因此 GitHub 甚至在它进入 repo 之前就解析为代码。

对于正在考虑标记此问题以引起版主注意的每个人，仅供参考：答案对您不起作用的事实并不是标记它的理由。只需评论和/或投反对票。我不会删除技术错误的答案。如果 vdlouis 想自己删除它，因为社区认为它没有帮助，那应该是他的选择。

我刚刚在 Github 上的 readme.md 文件中尝试过，并确认它似乎不起作用。我会对显示演示和屏幕截图的 OP 感兴趣，但是，无论在什么情况下，他都能让它工作。

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

关注公众号

想领先一步获取最新的外包任务吗？

相似问题

平台

支持

友情链接

联系我们