449

GitHub で使用されている Markdown 構文をしばらく調べていましたが、README.mdページの幅に合わせて画像のサイズを変更する以外に、画像を中央に配置する方法がわかりません。

これは可能ですか？もしそうなら、どうすればいいですか？

4

14 に答える 14

739

これは GitHub のサポートからのものです。

ねえ、ウォルディア

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 で表示したときに中央に表示される場合を除いて、次の画像出力が生成されます。

<p align="center">
  <img src="https://github.com/waldyr/Sublime-Installer/blob/master/sublime_text.png?raw=true" alt="Sublime's custom image"/>
</p>
于 2012-08-25T01:00:25.593 に答える
202

GitHub で使われている Markdown 構文を見てきました [...]、画像を中央に配置する方法がわかりません

TL;DR

いいえ、Markdown 構文だけに依存することはできません。Markdown はポジショニングを気にしません。

注:一部の Markdown プロセッサは HTML の組み込みをサポートしており (@waldyr.ar によって正しく指摘されているように)、GitHub の場合は、<div style="text-align:center"><img src="..." /></div>.

リポジトリが別のホスティング環境 ( CodePlex、Bitbucketなど) でフォークされている場合、またはドキュメントがブラウザーを介して読み取られていない場合 ( Sublime Text Markdown preview、MarkdownPad、Visual Studio Web Essentials Markdown プレビュー、...)。

注 2: GitHub Web サイト内でも、Markdown のレンダリング方法は統一されていないことに注意してください。たとえば、ウィキでは、そのような CSS の位​​置のトリックを許可しません。

完全版

Markdown 構文は、画像の位置を制御する機能を提供しません。

実際、 「哲学」セクションで述べたように、そのような書式設定を許可することは Markdown の哲学に反する境界線となります。

「マークダウン形式のドキュメントは、タグや書式設定の指示でマークアップされたように見えることなく、プレーン テキストとしてそのまま公開できる必要があります。」

Markdown ファイルは、Ruby Redcarpetライブラリを使用して github.com Web サイトによってレンダリングされます。

Redcarpet は、標準の Markdown 構文の一部ではなく、追加の「機能」を提供するいくつかの拡張機能(たとえば、取り消し線など) を公開します。ただし、サポートされている拡張機能では、画像を中央に配置できません。

于 2012-08-23T12:25:38.353 に答える
51

または、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 ドキュメントの一般的なスタイルの問題です。

于 2016-07-18T01:22:44.450 に答える
10

イメージのサイズを目的の幅と高さに変更することもできます。例えば：

<p align="center">
  <img src="https://anyserver.com/image.png" width="750px" height="300px"/></p>

中央のキャプションを画像に追加するには、あと 1 行だけ:

<p align="center">This is a centered caption for the image<p align="center">

幸いなことに、これは README.md と GitHub Wiki ページの両方で機能します。

于 2018-02-09T03:19:13.930 に答える
8

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”&gt; [ Your content here ]</div>ページにすべてが収まり、ページの寸法に合わせて中央揃えになります。

于 2020-04-14T17:21:56.970 に答える
-17

これは非常に簡単です。

-> This is centered Text <-

そのことを念頭に置いて、これを img 構文に適用できます。

->![alt text](/link/to/img)<-
于 2013-03-12T19:36:04.087 に答える