我一直在研究GitHub中使用的Markdown语法，但除了将图像大小调整为README的宽度。md页面，我不知道如何在它的中心图像。
这可能吗?如果有，我该怎么做?
当前回答
TLDR: 直接往下看下面称为“1”的部分中的4个例子(1.1、1.2、1.3和1.4)。在GitHub自述中使用已弃用的HTML对齐属性“!
另外，在我的仓库中，可以在GitHub上查看几个自述me markdown文件中的实际示例:
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 *内编辑任何形式的CSS(级联样式表)样式的尝试(包括外部，内部和内联)。Md标记文件，如自述文件。看这里(强调):
Custom css file for readme.md in a Github repo GitHub does not allow for CSS to affect README.md files through CSS for security reasons... https://github.community/t/github-flavored-markdown-doesnt-render-css-styles-inside-a-html-block/126258/2?u=electricrcaircraftguy Unfortunately you cannot use CSS in GitHub markdown as it is a part of the sanitization process. The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes. source: https://github.com/github/markup
所以，这意味着在GitHub自述中居中或对齐图像，你唯一的解决方案是使用已弃用的HTML对齐属性(恰好仍然起作用)，正如这个答案所示。
I should also point out that although that solution does indeed work, it is causing a lot of confusion for that answer to claim to use inline css to solve the problem, since, like @Poikilos points out in the comments, that answer has no CSS in it whatsoever. Rather, the align="center" part of the <p> element is a deprecated HTML attribute (that happens to still function) and is NOT CSS. All CSS, whether external, internal, or inline is banned from GitHub readmes and explicitly removed, as indicated through trial-and-error and in the two references above.
这让我把我的答案分为两个:
“使用已弃用的HTML对齐属性在GitHub自述中对图像进行居中和对齐”，以及 “在任何降价文档中使用现代CSS对图像进行居中和对齐，你也可以控制CSS样式”。
选项2只适用于你可以完全控制CSS样式的地方，比如在一个自定义的GitHub页面网站你可能做?
1. 使用已弃用的HTML align属性在GitHub自述中对图像进行居中和对齐:
这适用于任何GitHub *。md标记文件，例如GitHub自述文件。md文件。它依赖于已弃用的HTML align属性，但仍然可以正常工作。你可以在我的eRCaGuy_hello_world repo中看到一个真实的GitHub自述文件的完整演示:https://github.com/ElectricRCAircraftGuy/eRCaGuy_hello_world/blob/master/markdown/github_readme_center_and_align_images.md。
注:
Be sure to set width="100%" inside each of your <p> paragraph elements below, or else the entire paragraph tries to allow word wrap around it, causing weird and less-predicable effects. To resize your image, simply set width="30%", or whatever percent you'd like between 0% and 100%, to get the desired effect! This is much easier than trying to set a pixel size, such as width="200" height="150", as using a width percent automatically adjusts to your viewer's screen and to the page display width, and it automatically resizes the image as you resize your browser window as well. It also avoids skewing the image into unnatural proportions. It's a great feature! Options for the (deprecated) HTML align attribute include left, center, right, and 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>元素对齐到中心，但您也可以向左或向右对齐，如前面的示例所示，以迫使一行图像也以这种方式对齐。例子:
这样的:
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属性对齐整行图像，或者在本例中向右对齐)。一般来说，中心是首选的，就像上面的例子所做的那样。
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倍:
因此，将这两行图像放置在一个降价表中，强制使用好看的垂直间距。请注意，在下面的降价表中，每个图像都设置了一个HTML宽度属性为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样式:
这工作在任何markdown文件，如一个GitHub页面网站可能?，在这里你可以完全控制CSS样式。这在任何GitHub *中都不起作用。Md标记文件，例如自述文件。因此，因为GitHub显式扫描并禁用您试图使用的所有自定义CSS样式。见上图。
TLDR;
使用这个HTML/CSS来添加和居中图像，并将其大小设置为屏幕宽度的60%，这通常是一个很好的起始值:
<img src="https://i.stack.imgur.com/RJj4x.png"
style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
将宽度CSS值更改为您想要的百分比，或者将其完全删除以使用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插入图像:
或HTML在你的markdown文件:
<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>
现在，您的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属性，但是，比如width，就像这样:
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign" style="width:20%">
现在你会得到这个:
4. 创建3个CSS类，但不要更改img markdown默认值
上面我们修改了默认的img属性: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> block above:
/* 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属性，也应该如此。
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign small">
5. 巩固CSS类中的常用设置:
最后一个技巧是我在回答这个问题时学到的:如何使用CSS对多个图像进行不同的样式?如上所示，所有3个CSS对齐类都将图像宽度设置为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. 我对HTML和CSS在Markdown的想法
在我看来，任何可以写入markdown文档并获得预期结果的内容都是我们所追求的，而不是一些“纯粹的markdown”语法。
在C和c++中，编译器编译成程序集代码，然后程序集被汇编成二进制。然而，有时您需要只有程序集才能提供的低级控件，因此您可以在C或c++源文件中编写内联程序集。汇编是“低级”语言，可以直接在C和c++中编写。
减价也是如此。Markdown是一种高级语言，可以被解释为HTML和CSS。然而，当我们需要额外的控制时，我们可以将低级别的HTML和CSS“内联”到markdown文件中，它仍然会被正确地解释。因此，在某种意义上，HTML和CSS是有效的“markdown”语法。
因此，要在markdown中居中图像，请使用HTML和CSS。
2. 标准图像插入markdown:
如何添加一个基本的图像markdown与默认的“幕后”HTML和CSS格式:
这个减记:
将产生如下输出:
这是我做的射火六旋翼直升机。
您还可以选择在开始方括号中添加描述。老实说，我甚至不确定这是做什么，但也许它会转换为HTML <img>元素alt属性，在图像无法加载的情况下显示，并可能由屏幕阅读器为盲人阅读。所以，这个降价:
也会产生这样的输出:
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;
">
这里有更多信息。这里发生了什么:
The <img part of the above code is the HTML "start tag", while the > at the end is the HTML "end tag". Everything from the start tag to the end tag, inclusive, makes up this HTML img "element". HTML img "tags"/"elements" are used to insert images into HTML. Each of the assignments inside the element is configuring an HTML "attribute". The "style" attribute accepts CSS styling, so everything inside the double quotes here: style="" is a CSS property:value key-value "declaration". Note that each CSS "property:value declaration" is separated by a semicolon (;), whereas each HTML "attribute" in this "element" is separated by a space ( ). To get the image to center in our HTML and CSS code above, the key "attributes" are simply the src and style ones. The alt one is optional. Inside the HTML style attribute, which accepts CSS styling, the key declarations are all 4 that I show: display:block, float:none, margin-left:auto, and margin-right:auto. If nothing has previously set the float property before, then you can leave off this declaration, but it's a good idea to have it anyway just in case. If first learned how to center an image using HTML and CSS here: https://www.w3schools.com/howto/howto_css_image_center.asp. CSS uses C-style comments (/* my comment */).
引用:
GeeksForGeeks: HTML | <p> align Attribute Read more about CSS Syntax here: https://www.w3schools.com/css/css_syntax.asp Read about "HTML Tags vs Elements" here. I learned just about everything I know about HTML and CSS by clicking around on w3schools.com. Here's a few specific pages: %%%%%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 and CSS comments: https://www.w3schools.com/css/css_comments.asp My fire-shooting hexacopter I made: https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html
其他回答
这其实很简单。
-> This is centered Text <-
记住这一点，你可以把它应用到img语法中。
-><-
我不知道为什么没有人提到<center>标签。更多阅读请参考医生。
<center>
<h1>Hola App</h1>
<img src="root/static/assets/img/beer.svg">
</center>
对于左对齐
<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>
如果您觉得这有用，请在这里分叉以供将来参考。
TLDR: 直接往下看下面称为“1”的部分中的4个例子(1.1、1.2、1.3和1.4)。在GitHub自述中使用已弃用的HTML对齐属性“!
另外，在我的仓库中，可以在GitHub上查看几个自述me markdown文件中的实际示例:
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 *内编辑任何形式的CSS(级联样式表)样式的尝试(包括外部，内部和内联)。Md标记文件，如自述文件。看这里(强调):
Custom css file for readme.md in a Github repo GitHub does not allow for CSS to affect README.md files through CSS for security reasons... https://github.community/t/github-flavored-markdown-doesnt-render-css-styles-inside-a-html-block/126258/2?u=electricrcaircraftguy Unfortunately you cannot use CSS in GitHub markdown as it is a part of the sanitization process. The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes. source: https://github.com/github/markup
所以，这意味着在GitHub自述中居中或对齐图像，你唯一的解决方案是使用已弃用的HTML对齐属性(恰好仍然起作用)，正如这个答案所示。
I should also point out that although that solution does indeed work, it is causing a lot of confusion for that answer to claim to use inline css to solve the problem, since, like @Poikilos points out in the comments, that answer has no CSS in it whatsoever. Rather, the align="center" part of the <p> element is a deprecated HTML attribute (that happens to still function) and is NOT CSS. All CSS, whether external, internal, or inline is banned from GitHub readmes and explicitly removed, as indicated through trial-and-error and in the two references above.
这让我把我的答案分为两个:
“使用已弃用的HTML对齐属性在GitHub自述中对图像进行居中和对齐”，以及 “在任何降价文档中使用现代CSS对图像进行居中和对齐，你也可以控制CSS样式”。
选项2只适用于你可以完全控制CSS样式的地方，比如在一个自定义的GitHub页面网站你可能做?
1. 使用已弃用的HTML align属性在GitHub自述中对图像进行居中和对齐:
这适用于任何GitHub *。md标记文件，例如GitHub自述文件。md文件。它依赖于已弃用的HTML align属性，但仍然可以正常工作。你可以在我的eRCaGuy_hello_world repo中看到一个真实的GitHub自述文件的完整演示:https://github.com/ElectricRCAircraftGuy/eRCaGuy_hello_world/blob/master/markdown/github_readme_center_and_align_images.md。
注:
Be sure to set width="100%" inside each of your <p> paragraph elements below, or else the entire paragraph tries to allow word wrap around it, causing weird and less-predicable effects. To resize your image, simply set width="30%", or whatever percent you'd like between 0% and 100%, to get the desired effect! This is much easier than trying to set a pixel size, such as width="200" height="150", as using a width percent automatically adjusts to your viewer's screen and to the page display width, and it automatically resizes the image as you resize your browser window as well. It also avoids skewing the image into unnatural proportions. It's a great feature! Options for the (deprecated) HTML align attribute include left, center, right, and 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>元素对齐到中心，但您也可以向左或向右对齐，如前面的示例所示，以迫使一行图像也以这种方式对齐。例子:
这样的:
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属性对齐整行图像，或者在本例中向右对齐)。一般来说，中心是首选的，就像上面的例子所做的那样。
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倍:
因此，将这两行图像放置在一个降价表中，强制使用好看的垂直间距。请注意，在下面的降价表中，每个图像都设置了一个HTML宽度属性为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样式:
这工作在任何markdown文件，如一个GitHub页面网站可能?，在这里你可以完全控制CSS样式。这在任何GitHub *中都不起作用。Md标记文件，例如自述文件。因此，因为GitHub显式扫描并禁用您试图使用的所有自定义CSS样式。见上图。
TLDR;
使用这个HTML/CSS来添加和居中图像，并将其大小设置为屏幕宽度的60%，这通常是一个很好的起始值:
<img src="https://i.stack.imgur.com/RJj4x.png"
style="display:block;float:none;margin-left:auto;margin-right:auto;width:60%">
将宽度CSS值更改为您想要的百分比，或者将其完全删除以使用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插入图像:
或HTML在你的markdown文件:
<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>
现在，您的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属性，但是，比如width，就像这样:
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign" style="width:20%">
现在你会得到这个:
4. 创建3个CSS类，但不要更改img markdown默认值
上面我们修改了默认的img属性: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> block above:
/* 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属性，也应该如此。
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign small">
5. 巩固CSS类中的常用设置:
最后一个技巧是我在回答这个问题时学到的:如何使用CSS对多个图像进行不同的样式?如上所示，所有3个CSS对齐类都将图像宽度设置为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. 我对HTML和CSS在Markdown的想法
在我看来，任何可以写入markdown文档并获得预期结果的内容都是我们所追求的，而不是一些“纯粹的markdown”语法。
在C和c++中，编译器编译成程序集代码，然后程序集被汇编成二进制。然而，有时您需要只有程序集才能提供的低级控件，因此您可以在C或c++源文件中编写内联程序集。汇编是“低级”语言，可以直接在C和c++中编写。
减价也是如此。Markdown是一种高级语言，可以被解释为HTML和CSS。然而，当我们需要额外的控制时，我们可以将低级别的HTML和CSS“内联”到markdown文件中，它仍然会被正确地解释。因此，在某种意义上，HTML和CSS是有效的“markdown”语法。
因此，要在markdown中居中图像，请使用HTML和CSS。
2. 标准图像插入markdown:
如何添加一个基本的图像markdown与默认的“幕后”HTML和CSS格式:
这个减记:
将产生如下输出:
这是我做的射火六旋翼直升机。
您还可以选择在开始方括号中添加描述。老实说，我甚至不确定这是做什么，但也许它会转换为HTML <img>元素alt属性，在图像无法加载的情况下显示，并可能由屏幕阅读器为盲人阅读。所以，这个降价:
也会产生这样的输出:
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;
">
这里有更多信息。这里发生了什么:
The <img part of the above code is the HTML "start tag", while the > at the end is the HTML "end tag". Everything from the start tag to the end tag, inclusive, makes up this HTML img "element". HTML img "tags"/"elements" are used to insert images into HTML. Each of the assignments inside the element is configuring an HTML "attribute". The "style" attribute accepts CSS styling, so everything inside the double quotes here: style="" is a CSS property:value key-value "declaration". Note that each CSS "property:value declaration" is separated by a semicolon (;), whereas each HTML "attribute" in this "element" is separated by a space ( ). To get the image to center in our HTML and CSS code above, the key "attributes" are simply the src and style ones. The alt one is optional. Inside the HTML style attribute, which accepts CSS styling, the key declarations are all 4 that I show: display:block, float:none, margin-left:auto, and margin-right:auto. If nothing has previously set the float property before, then you can leave off this declaration, but it's a good idea to have it anyway just in case. If first learned how to center an image using HTML and CSS here: https://www.w3schools.com/howto/howto_css_image_center.asp. CSS uses C-style comments (/* my comment */).
引用:
GeeksForGeeks: HTML | <p> align Attribute Read more about CSS Syntax here: https://www.w3schools.com/css/css_syntax.asp Read about "HTML Tags vs Elements" here. I learned just about everything I know about HTML and CSS by clicking around on w3schools.com. Here's a few specific pages: %%%%%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 and CSS comments: https://www.w3schools.com/css/css_comments.asp My fire-shooting hexacopter I made: https://www.electricrcaircraftguy.com/2016/05/battlebots-season-2-buzz-fire-drone.html
这是来自GitHub的支持:
Markdown不允许你直接调整对齐(见文档这里:http://daringfireball.net/projects/markdown/syntax#img)，但你可以只使用原始HTML 'img'标签，并与内联css对齐。
因此，对齐图像是可能的!你只需要使用内联CSS来解决这个问题。你可以从我的GitHub存储库中拿一个例子。在README的底部。这是一个居中对齐的图像。为了简单起见，你可以这样做:
<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>
推荐文章
- 使用pandoc从Markdown转换为PDF时设置空白大小
- 如何修复Github页面上的HTTP 404 ?
- 如何显示数学方程在一般github的markdown(不是github的博客)
- 无法推送到远程分支，无法解析到分支
- 使用Markdown的Sphinx而不是reST
- 如何在GitHub上创建自己的存储库?
- Github“更新被拒绝，因为远程包含您在本地没有的工作。”
- 降价和图像对齐
- 如何在不同的用户名下推送到GitHub ?
- 在最初创建提交的GitHub上找到一个Pull Request
- Git凭据助手-更新密码
- 标签和释放的区别是什么?
- 切换到另一个Git标记
- Heroku和GitHub:“项目无法检索，内部服务器错误”
- 将现有项目推到Github
