私はしばらくGitHubで使用されているマークダウン構文を調べてきましたが、readme.mdページの範囲まで画像のサイズを変更しない限り、画像を中央に配置する方法を理解できません。
出来ますか？もしそうなら、どうですか？
回答:
私はgithubで使用されているマークダウン構文を見てきました[...]、画像を中央に配置する方法がわかりません
TL; DR
いいえ、Markdown構文だけに依存することはできません。Markdownは配置を気にしません。
注：一部のマークダウンプロセッサは、@ waldyr.arによって正しく指摘されているように、HTMLのインクルードをサポートしており、GitHubの場合、のようなものにフォールバックすることがあり<div style="text-align:center"><img src="..." /></div>ます。リポジトリが別のホスティング環境（Codeplex、BitBucketなど）でフォークされている場合、またはドキュメントがブラウザーで読み取られない場合（Sublime Text Markdownプレビュー、MarkdownPad、VisualStudio Web）、画像が中央に配置される保証はありません。 Essentials Markdownプレビュー、...）。
注2： GitHub Webサイト内でも、マークダウンのレンダリング方法が統一されていないことに注意してください。たとえば、wikiはそのようなcssの位置的なトリックを許可しません。
簡略版
値引き構文は、画像の位置を制御する能力を持つものを提供しません。
実際、「哲学」セクションで述べたように、このようなフォーマットを許可することは、Markdownの哲学に対する境界線になります。
「マークダウン形式のドキュメントは、タグやフォーマットの指示でマークアップされているように見せることなく、そのままテキスト形式で公開できる必要があります。」
マークダウンファイルは、Ruby Redcarpetライブラリを使用してgithub.com Webサイトによってレンダリングされます。
Redcarpetは、標準のMarkdown構文の一部ではない拡張機能（たとえば、取り消し線など）を公開し、追加の「機能」を提供します。ただし、サポートされている拡張機能では、画像を中央に配置できません。
<img align="..." src="..." alt="...">
<span style="display:block;text-align:center">![Test Automation]Automated-Testing.png)</span>
align属性は、imgHTML 4.01で廃止され、HTML5で廃止されました。
これはGithubのサポートによるものです。
ちょっとWaldyr、
Markdownでは、配置を直接微調整することはできません（ここのドキュメントを参照してください：http : //daringfireball.net/projects/markdown/syntax#img）、生のHTML 'img'タグを使用してインラインで配置を行うことができますCSS。
乾杯、
だから、画像を揃えることが可能です！問題を解決するには、インラインCSSを使用する必要があります。私のgithubリポジトリから例をとることができます。README.mdの下部には、中央揃えの画像があります。簡単にするために、次のようにすることができます。
<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で表示したときに中央に配置されることを除いて、この画像出力を生成します。
align属性はHTML5ではサポートされていないようです。
または、cssを制御できる場合は、urlパラメータとcssを使用して賢くすることができます。
マークダウン：
そしてCSS：
img[src$="centerme"] {
display:block;
margin: 0 auto;
}
この方法でさまざまなスタイルオプションを作成し、マークダウンに余分なコードを含まないようにすることができます。もちろん、他の誰かがどこかでマークダウンを使用した場合に何が起こるかを制御することはできませんが、それは、1つの共有するすべてのマークダウンドキュメントでの一般的なスタイルの問題です。
以下のための左揃え
<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>
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> ページのすべてに適合し、ページの寸法に合わせて中央に配置します。
画像の配置に関する問題を解決する私の方法は、HTML属性を使用することでした。
{ width="800" height="600" style="display: block; margin: 0 auto" }
少なくとも私のローカルVSマークダウンレンダラーでは、画像のサイズが変更され、適切に中央に配置されました。
次に、変更をリポジトリにプッシュしましたが、残念ながら、GitHub README.mdファイルでは機能しないことに気付きました。それでも、他の人の役に立つかもしれないので、この回答は残しておきます。
最後に、代わりに古き良きHTMLタグを使用することになりました。
<img src="Image.svg" alt="Image" width="800" height="600" style="display: block; margin: 0 auto" />
しかし、何だと思いますか？一部のJSメソッドが私のstyle属性を置き換えました！私もclass属性を試しましたが、同じ結果が得られました！
次に、さらに古いHTMLが使用されている次の要点ページを見つけました。
<p align="center">
<img src="Image.svg" alt="Image" width="800" height="600" />
</p>
これは問題なく動作していますが、コメントを付けずにそのままにしておきます...
これを処理できる「純粋な」マークダウンアプローチは、画像をテーブルに追加してからセルを中央揃えにします。
|  |
| :--: |
次のようなHTMLが生成されます。
<table>
<thead>
<tr>
<th style="text-align:center;"><img src="img.png" alt="Image"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>この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%"> widthCSS値を任意のパーセントに変更するか、完全に削除して、マークダウンのデフォルトサイズを使用します。これは、画像が画面より大きい場合は画面の幅の100％であると考えられ、それ以外の場合は実際の画像の幅です。
できた！
または、さらに多くの情報を読んでください。
これをコピーしてマークダウンファイルの上部に貼り付け、ファイル内のすべての画像を中央に配置してサイズを変更します（次に、通常のマークダウン構文で必要な画像を挿入します）。
<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：
<img src="https://i.stack.imgur.com/RJj4x.png"> ...上記のHTMLおよびCSS内のコメントで説明されているように、自動的に中央に配置され、スクリーンビューの幅の60％にサイズ設定されます。（もちろん、60％のサイズも簡単に変更できます。また、画像ごとに行う簡単な方法を以下に示します）。
上記の<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 */
"> このすべてをマークダウンファイルの先頭に追加します。
<style>
/* By default, make all images center-aligned, and 60% of the width
of the screen in size */
img
{
display:block;
float:none;
margin-left:auto;
margin-right:auto;
width:60%;
}
/* Create a CSS class to style images to left-align, or "float left" */
.leftAlign
{
display:inline-block;
float:left;
/* provide a 15 pixel gap between the image and the text to its right */
margin-right:15px;
}
/* Create a CSS class to style images to right-align, or "float right" */
.rightAlign
{
display:inline-block;
float:right;
/* provide a 15 pixel gap between the image and the text to its left */
margin-left:15px;
}
</style> これで、imgCSSブロックは画像のデフォルト設定を中央に配置し、画面スペースの幅の60％のサイズを設定しましたが、leftAlignおよびrightAlignCSSクラスを使用して、画像ごとにこれらの設定をオーバーライドできます。
たとえば、この画像は中央揃えでサイズが60％になります（上で設定したデフォルト）。
<img src="https://i.stack.imgur.com/RJj4x.png"> この画像は左揃えになりますが、leftAlign上で作成したCSSクラスを使用して、テキストが右に折り返されます。
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign">次のようになります。
ただし、次のように、幅などの属性を使用して、そのCSSプロパティをオーバーライドstyleできます。
<img src="https://i.stack.imgur.com/RJj4x.png" class="leftAlign" style="width:20%">そして今あなたはこれを手に入れるでしょう：
imgマークダウンのデフォルトは変更しません上記で示したデフォルト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%">上記widthのCSS style属性を使用してプロパティを手動で設定する方法に注意してください。ただし、より複雑なことが必要な場合は、次のような追加のクラスを作成して、<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 */
}このように、同じオブジェクトに複数のクラスを割り当てることができます。単にスペース、NOTカンマで区切りのクラス名。設定が競合する場合は、最後に設定されたものが有効になり、以前に設定された設定が上書きされます。これは、同じCSSクラスまたは同じHTML style属性内で同じCSSプロパティを複数回設定した場合にも当てはまります。
<img src="https://i.stack.imgur.com/RJj4x.png" class="centerAlign small">最後のトリックは、この回答でここで学んだものです。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> 私に関する限り、マークダウンドキュメントに記述して目的の結果を得ることができるのは、「純粋なマークダウン」構文ではなく、すべてです。
CおよびC ++では、コンパイラはアセンブリコードにコンパイルされ、アセンブリはバイナリにアセンブルされます。ただし、アセンブリのみが提供できる低レベルのコントロールが必要な場合があるため、CまたはC ++ソースファイル内にインラインアセンブリを書き込むことができます。アセンブリは「下位レベル」の言語であり、CおよびC ++の内部で直接記述できます。
マークダウン付きです。MarkdownはHTMLとCSSに解釈される高級言語です。ただし、追加の制御が必要な場合は、マークダウンファイル内で下位レベルのHTMLとCSSを「インライン化」するだけで、正しく解釈されます。したがって、ある意味では、HTMLとCSS は有効な「マークダウン」構文です。
したがって、画像をマークダウンの中央に配置するには、HTMLとCSSを使用します。
デフォルトの「舞台裏」のHTMLおよびCSSフォーマットを使用して、マークダウンに基本的な画像を追加する方法：
この値下げ：
この出力を生成します：
これは私が作った私の射撃ヘキサコプターです。
オプションで、開始角括弧内に説明を追加することもできます。正直なところ、それが何をするかすらわかりませんが、おそらくHTML <img>要素のalt属性に変換され、画像を読み込めない場合に表示され、視覚障害者向けのスクリーンリーダーで読み取ることができます。したがって、このマークダウン：
この出力も生成します：
画像をマークダウンの中央に配置するには、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;
"> 詳細はこちらです。ここで何が起こっているのか：
<img上記のコードの一部はHTMLの「開始タグ」>ですが、最後のHTMLは「終了タグ」です。img「要素」を構成します。img 「タグ」/「要素」は、HTMLに画像を挿入するために使用されます。style=""CSSのあるproperty:valueキーと値の「宣言」。
;）で区切られていますが、この「要素」内の各HTML「属性」はスペース（srcとstyleです。alt1はオプションです。style：CSSスタイルを受け入れる属性、キーの宣言は、私が表示されていること全て4ですdisplay:block、float:none、margin-left:auto、とmargin-right:auto。
float プロパティを設定したことがない場合は、この宣言を省略できますが、念のためにとにかくそれを持っていることをお勧めします。/* my comment */）を使用します。これは本当に簡単です。
-> This is centered Text <-
したがって、これを念頭に置いて、これをimg構文に適用できます。
-><-