小开

最佳答案

我一直在看在GitHub使用Markdown语法[…])，我不知道怎样把图像居中

博士TL;

不，你不能通过只有依赖Markdown语法。Markdown不关心定位。

注意:一些Markdown处理器支持包含HTML(正如@waldyr.ar正确指出的那样)，在GitHub的情况下，你可能会退回到像<div style="text-align:center"><img src="..." /></div>这样的东西。

注意，如果你的存储库在不同的托管环境中(CodePlex上， Bitbucket都等)，或者如果文档不是通过浏览器读取(崇高的文本 Markdown预览，MarkdownPad, Visual Studio Web Essentials Markdown预览，…)，就不能保证图像将位于中心。

注2:请记住，即使在GitHub网站，Markdown渲染的方式是不统一的。例如，wiki不允许这样的CSS位置诡计。

完整的版本

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

事实上，允许这样的格式化是与Markdown哲学相抵触的，如Philosophy"部分所述。

“标记下格式的文档应该是可发布的，作为纯文本，而不是看起来像被标记了标签或格式说明。”“;

Markdown文件是由github.com网站通过使用Ruby 红地毯库呈现的。

Redcarpet公开了一些extensions(例如，strikethrough)，这些extensions不是标准Markdown语法的一部分，并提供了额外的“特性”。但是，没有支持的扩展允许您将图像居中。

小开

这是来自GitHub的支持:

嘿,Waldyr,

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>

小开

这其实很简单。

-> This is centered Text <-

记住这一点，你可以把它应用到img语法中。

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

小开

或者，如果你可以控制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文档来说，这是一个普遍的样式问题。

小开

它在GitHub上为我工作

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

小开

为了稍微扩展一下答案以支持本地图像，只需用你的图像路径取代 FILE_PATH_PLACEHOLDER并检查它。

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

小开

你也可以将图像大小调整为所需的宽度和高度。例如:

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

小开

对于左对齐

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

Fork它在这里以供将来参考，如果你觉得这有用的话。

小开

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

然而，这一个工作得很好，我想在没有进一步评论的情况下离开它…

小开

我们可以用下面的。请从Git文件夹中更改图像的src位置，如果图像未加载，则添加备用文本:

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

小开

一个“pure"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>

小开

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

小开

< p > TLDR:
直接往下看下面称为“1。定心和对齐图像在GitHub readmes使用已弃用的HTML align属性"!的部分中的4个例子(1.1、1.2、1.3和1.4)。< / p >

另外，在我的仓库中，可以在GitHub上查看几个自述me markdown文件中的实际示例:

如何在markdown中居中和对齐图像的背景:

所以，它证明GitHub显式地阻止/过滤掉所有尝试编辑任何形式的CSS(级联样式表)样式(包括外部，内部和内联)在GitHub *.md markdown文件，如readmes。见这里(强调添加):

< p > 自定义css文件自述。md在Github回购

GitHub不允许CSS影响README。出于安全原因，md文件通过CSS…
< p > 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，你唯一的解决方案是使用弃用HTML align属性(这仍然是功能)，作为这个答案显示。

我还应该指出，尽管这个解决方案确实有效，但它引起了很多困惑，因为这个答案声称使用inline css to solve the problem，因为，就像@ poikilolos在评论中指出的那样，这个答案没有CSS。更确切地说，<p>元素的align="center"部分是一个已弃用的HTML属性(碰巧仍然是函数)，不是CSS。所有CSS，无论是外部、内部或内联被禁止从GitHub自述和显式删除，通过试错和上面的两个参考。

这让我把我的答案分为两个:

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

选项2只适用于你可以完全控制CSS样式的地方，比如在自定义GitHub页面网站你可能?

< h1 id = " centering-and-aligning-images-in-github-readmes-using-the-deprecated-html-align-attribute-mc3y " > 1。在GitHub readmes中居中和对齐图像使用已弃用的HTML align属性:

这适用于任何GitHub *.md markdown文件，例如GitHub readme.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。

注:

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

< h2 id = " align-images-left-right-or-centered-with-no-word-wrap-aivr " > 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>

产生这个:

< h2 id = " align-images-left-right-or-centered-with-word-wrap-zu4o " > 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.

生产:

< h2 id = " align-images-side-by-side-txwr " > 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是首选，就像上面的例子一样。

< h2 id = " use-a-markdown-table-to-improve-vertical-spacing-of-odd-sizedodd-shaped-images-z6tg " > 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 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"> |

产生这样的效果，在我看来，它看起来更好，而且间隔更均匀，因为垂直间距也为每一行图像居中:

< h1 id = " centering-and-aligning-images-using-modern-css-in-any-markdown-document-where-you-also-have-control-over-css-styles-r8fq " > 2。在任何markdown文档中使用现代CSS对图像进行居中和对齐，其中您还可以控制CSS样式:

这适用于任何markdown文件，例如GitHub页面网站也许?，在这里你可以完全控制CSS样式。这在任何GitHub *.md markdown文件中都不起作用，例如readme.md，因此，因为GitHub显式扫描并禁用您试图使用的所有自定义CSS样式。见上图。

< h2 id = " tldr-tnhr " > TLDR; < / h2 >

使用这个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%">

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

完成了!

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

这里有各种HTML和CSS选项，它们在markdown文件中完美地工作，只要CSS没有被明确禁止 < h2 id = " center-and-configure-resize-all-images-in-your-markdown-file-keaf " > 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在你的markdown文件:

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

.．.它会自动居中，大小调整到屏幕宽度的60%，如上面的HTML和CSS注释中所述。(当然，60%的大小也很容易改变，下面我介绍了一些简单的方法，可以在每张图像的基础上进行调整)。

< h2 id = " center-and-configure-images-on-a-case-by-case-basis-one-at-a-time-4hdk " > 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 */
">

< h2 id = " in-addition-to-all-of-the-above-you-can-also-create-css-style-classes-to-help-stylize-individual-images-b9ax " > 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%">

现在你会得到这个:

< h2 id = " create-3-css-classes-but-dont-change-the-img-markdown-defaults-7h0w " > 4。创建3个CSS类，但不要更改img markdown默认值

上面我们修改了默认的img property:value设置并创建了2个类，另一个选项是只保留所有默认的降价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 */
}

现在您可以将多个类分配给同一个对象，就像这样。只是用空格分隔类名，而不是逗号。在设置冲突的情况下，我相信任何设置最后的将会生效，覆盖之前设置的任何设置。如果你在同一个CSS类中或在同一个HTML style属性中多次设置相同的CSS属性，也应该是这样。

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

< h2 id = " consolidate-common-settings-in-css-classes-tl5r " > 5。巩固CSS类中的通用设置:

最后一个技巧是我在这个答案中学到的:我如何使用CSS样式不同的多个图像?。如上所示，所有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>

表的方法

另一种方法是使用表。

<table>
<tr>
<td valign="center">
<span style="margin-bottom: 10px;"> Some Text </span>
</td>
<td valign="center">
<img src="https://github-readme-stats.vercel.app/api?username=hossein13m&show_icons=true&title_color=ffffff&icon_color=34abeb&text_color=daf7dc&bg_color=151515"/>
</td>
</tr>
</table>

记住，这将在GitHub自述文件上工作，但不是在StackOverflow上的代码片段上。

如何在README中居中显示图像。md文件在GitHub?

如何在markdown中居中和对齐图像的背景:

这里有各种HTML和CSS选项，它们在markdown文件中完美地工作，只要CSS没有被明确禁止 < h2 id = " center-and-configure-resize-all-images-in-your-markdown-file-keaf " > 1。集中并配置(调整大小)markdown文件中的所有图像:

更多详细信息:

表的方法