github README.md中心图像

Question

我一直在看GitHub中使用的降价语法一段时间,但除了将图像调整到readme.md页面的范围外,我无法弄清楚如何将图像居中.

可能吗？如果是的话,怎么样？

Answer 1

这是来自Github的支持:

嘿Waldyr,

Markdown不允许您直接调整对齐(请参阅此处的文档:http://daringfireball.net/projects/markdown/syntax#img),但您可以使用原始HTML"img"标记并使用内联进行对齐CSS.

干杯,

所以可以对齐图像!您只需使用内联css来解决问题.你可以从我的github repo中拿一个例子.在README.md的底部有一个居中对齐的图像.为简单起见,您可以执行以下操作:

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

虽然,正如nulltoken所说,它将与Markdown哲学相悖!

Answer 2

我一直在研究github [...]中使用的markdown语法,我无法弄清楚如何使图像居中

TL; DR

不,你不能只依靠Markdown语法.Markdown不关心定位.

注意:某些降价处理器支持包含HTML(正如@ waldyr.ar所指出的那样),而在GitHub案例中,您可能会回退到类似的东西<div style="text-align:center"><img src="..." /></div>.请注意,如果您的存储库在不同的托管环境(Codeplex,BitBucket,...)中分叉,或者如果不通过浏览器读取文档,则无法保证图像将居中(Sublime Text Markdown预览,MarkdownPad,VisualStudio Web Essentials Markdown预览,...).

注意2:请记住,即使在GitHub网站内,呈现降价的方式也不统一.例如,wiki不会允许这样的css位置欺骗.

完整版

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

事实上,正如"哲学"部分所述,允许这种格式化将与Markdown哲学相悖

"Markdown格式的文档应该像普通文本一样可以发布,而不是看起来像是标记了标签或格式说明."

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

Redcarpet公开了一些扩展(例如删除线),它们不是标准Markdown语法的一部分,并提供额外的"功能".但是,没有支持的扩展名允许您居中图像.

Answer 3

或者,如果你有控制css,你可以聪明地使用url参数和css.

降价:

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

和CSS:

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

您可以通过这种方式创建各种样式选项,并且仍然保持标记清除额外的代码.当然,如果其他人在其他地方使用markdown,你无法控制会发生什么,但这是所有降价文件的一般造型问题.

Answer 4

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

另外，在我的存储库中的几个自述降价文件中查看 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
   1. 

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

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

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

   出于安全原因，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标签、内联样式和/class或id属性。

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

因此，这意味着要在 GitHub readmes 中居中或对齐图像，您唯一的解决方案是使用已弃用的 HTMLalign属性（碰巧仍然起作用），如此答案所示。

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

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

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

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

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

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

笔记：

1. 确保width="100%"在下面的每个<p>段落元素中进行设置，否则整个段落都试图让自动换行，从而导致奇怪且难以预测的效果。
2. 要调整图像大小，只需width="30%"在 0% 和 100% 之间设置或您想要的任何百分比，即可获得所需的效果！这是很多比试图建立一个像素大小，比如更容易width="200" height="150"，因为使用width自动调整百分之你的观众的屏幕和页面显示宽度，和你调整您的浏览器窗口，以及它会自动调整图像大小。它还避免将图像歪斜成不自然的比例。这是一个很棒的功能！
3. 对于选项（不建议使用）HTMLalign属性包括left，center，right，和justify。

1.1. 将图像左对齐、右对齐或居中对齐，无 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. 在任何 Markdown 文档中使用现代 CSS 居中和对齐图像，您还可以控制 CSS 样式：

这适用于任何降价文件，例如GitHub Pages网站？，您可以在其中完全控制 CSS 样式。这在任何 GitHub*.md降价文件（例如 ）中都readme.md不起作用，因为 GitHub expliclty 会扫描并禁用您尝试使用的所有自定义 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%">

将widthCSS 值更改为您想要的任何百分比，或者完全删除它以使用 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)

或 Markdown 文件中的 HTML：

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

...它将自动居中并调整为屏幕视图宽度的 60%，如上面 HTML 和 CSS 中的注释所述。（当然，60% 的大小也很容易改变，我在下面也提供了一些简单的方法来逐个图像地进行更改）。

2. 根据具体情况将图像居中并配置，一次一个：

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

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

您也可以将其格式化为多行，就像这样，它仍然可以工作：

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

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

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

<style>

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

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

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

</style>

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

例如，此图像将居中对齐且大小为 60%（我在上面设置的默认值）：

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

该图像将左对齐，但是，使用leftAlign我们刚刚在上面创建的CSS 类，文本向右换行！

          
          

              我很确定这是我在 Stack Overflow 上看到的最长的答案...... (35认同)
          
 
          
          

              将文本与其右侧的图像对齐不适用于 gif。 (2认同)
          
 
          
        
      
    

Answer 5

它适用于我在github上

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

Answer 6

用于左对齐

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

如果您觉得这很有用,可以将它放在这里以备将来参考.

Answer 7

您还可以将图像调整到所需的宽度和高度.例如:

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

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

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

至少在我本地的 Visual Studio Code 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 页面使用了更多的老式 HTML：

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

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

Answer 9

只需转到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 10

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

 <p align="center"> 
    <img src="ur img url here" alt="alternate text">
 </p>