web-dev-qa-db-ja.com

Markdownを使用して、画像とそのキャプションを中央に配置するにはどうすればよいですか？

私は次のようになりたい：

Hello there!

      <image>
      This is an image

Hi!

画像とテキストThis is an imageはページの中央に配置されます。 Markdownでこれを達成するにはどうすればよいですか？

編集：画像とテキストをページの中央に水平方向に向けていることに注意してください。

htmlcssmarkdowncenter
39
Chetan

定義された高さ、line-heightと同じ値、vertical-align：middleと同じ値を持つブロックコンテナが必要です。動作するはずです。

Hello there !

<div id="container">
    <img />
    This is an image
</div>

Hi !

#container {
    height:100px;
    line-height:100px;
}

#container img {
    vertical-align:middle;
    max-height:100%;
}
8
MatTheCat

何かを水平方向に揃えるにはHTMLを使用するだけでよいと考えました。

したがって、私のコードは次のようになります。

Hello there!

      <center><img src="" ...></center>
      <center>This is an image</center>

Hi!
35
Chetan

kramdown を使用している場合、これを行うことができます

Hello there!

{:.center}
![cardinal](/img/2012/cardinal.jpg)  
This is an image

Hi!

.center {
  text-align: center;
}
20
Steven Penny

CSSを定義できるとすれば、簡単な解決策があると思います。また、拡張機能やHTMLは必要ありません！まず、マークダウンイメージコード：

![my image](/img/myImage.jpg#center)

追加されたURLハッシュ#centerに注意してください。

次に、このルールをCSSに追加します。

img[src*='#center'] { 
    display: block;
    margin: auto;
}

クラス名を定義するのと同じように、このようなURLハッシュを使用できるはずです。

これを実際に見るには、SnarkDownを使用してJSFiddleをチェックして、テキストエリアでMarkDownを解析します- https://jsfiddle.net/tremor/6s30e8vr/

19
tremor

Mo （およびおそらくJekyll）では、これは非常に簡単です。

-> This is centered Text <-

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

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

Daring Fireball に記載されているもののみを実装するMarkdown実装では、この構文は機能しません。

18
vdclouis

Kramdownを使用（githubpagesで使用）

{: style="text-align:center"}
That is, while there is value in the items on
the right, we value the items on the left more.

または、@（Steven Penny）からの応答を使用して

{:.mycenter}
That is, while there is value in the items on
the right, we value the items on the left more.

<style>
.mycenter {
    text-align:center;
}
</style>
6
raisercostin