web-dev-qa-db-ja.com

github README.mdセンターイメージ

GitHubで使用されているマークダウン構文をしばらく見てきましたが、readme.mdページの範囲内で画像のサイズを変更する以外は、画像の中央に配置する方法を理解することはできません。

出来ますか？もしそうなら、どうですか？

githubmarkdown
267
Johnny Pauling

私はgithubで使用されているマークダウンの構文を見てきました[...]、私はどのように画像を中央揃えにするのかわからない

TL; DR

いいえ、Markdownの構文に頼ることでonlyにすることはできません。 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 Webサイト内でも、マークダウンのレンダリング方法は一様ではないことに注意してください。例えば、wikiはそのようなCSSの位置的なトリックを許可しません。

未修正バージョン

Markdown構文は、画像の位置を制御する機能を備えていません。 。

実際、"Philosophy" に記載されているように、そのようなフォーマットを許可することはMarkdownの哲学に対する境界線となります。 セクション

「Markdown形式の文書は、タグや書式設定の手順でマークアップされているように見えなくても、プレーンテキストとしてそのまま公開できるはずです。」

マークダウンファイルは、github.comのWebサイトでRubyRedcarpetライブラリを使用してレンダリングされます。

Redcarpetはいくつかの拡張子（例えば取り消し線など）を公開していますが、これらは規格の一部ではありません構文をマークダウンし、追加の「機能」を提供します。ただし、サポートされている拡張子では画像を中央揃えできません。

128
nulltoken

これはGithubのサポートによるものです。

Hey Waldyr、

Markdownはあなたが直接整列を微調整することを可能にしません（ここのドキュメントを見てください： http://daringfireball.net/projects/markdown/syntax#img ）ただし、生のHTMLの「img」タグを使用してインラインCSSと整列させることができます。

乾杯、

だから画像を整列させることは可能です！問題を解決するにはインラインCSSを使うだけです。あなたは私の githubレポ から例を取ることができます。 README.mdの一番下に中央揃えの画像があります。簡単にするためには、次のようにします。

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

Nulltokenが言ったように、それはマークダウン哲学に対する境界線になるでしょうが！

507
waldyr.ar

あるいは、CSSの制御権がある場合は、 URLパラメータとcss を使用すると賢くなります。

値下げ：

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

そしてCSS：

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

このようにしてさまざまなスタイル設定オプションを作成し、それでもマークダウンから余分なコードを排除することができます。もちろん、他の人がどこかでマークダウンを使用した場合に何が起こるかを制御することはできませんが、それは1つの共有に関するすべてのマークダウン文書に関する一般的なスタイルの問題です。

31
cyberwombat

それはgithubで私のために働きます

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

左揃えの場合

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

これが役に立つと思うなら、今後の参考のためにここで ここ にフォークしてください。

15
iNet

また、画像を希望の幅幅と高さに変更することもできます。例えば：

<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ページの両方で機能します。

6
khyox

これが使えます。 gitフォルダーからur imgのsrcの場所を変更し、imgがロードされていない場合は代替テキストを追加してください

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

ローカルの画像をサポートするために答えを少し拡張するには、FILE_PATH_PLACEHOLDERをあなたの画像パスに置き換えてチェックしてください。

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

画像の配置に関する問題を解決するための私の方法は、HTML属性を使用することでした。

![Image](Image.svg){ 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" />

しかし、どう思いますか？私のstyle属性を置き換えるJSメソッドがあります。 class属性を試しても同じ結果が得られます。

それから私は次の さらに古いHTMLが使われた要旨ページ を見つけました：

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

これはうまくいっていますが、私はこれ以上コメントせずに残したいと思います...

2
Gucu112