マークダウンと画像の配置
https://stackoverflow.com/questions/255170
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
毎月号の記事を発行するサイトを作成しています。それは簡単で、Markdownエディター（Stackの WMD など）を使用すると思います。 ！> nbsp; Overflow）は完璧です。
ただし、特定の段落内で画像を右揃えにする機能が必要です。
現在のシステムでそれを行う方法がわかりません-可能ですか？
解決
MarkdownにHTMLを埋め込むことができるので、次のようなことができます：
<img style="float: right;" src="whatever.jpg">
Continue markdown text...
他のヒント
多くのマークダウン<！> quot; extra <！> quot;プロセッサは属性をサポートします。そのため、次のようなクラス名を含めることができます（PHP Markdown Extra）：
{.callout}
または（Maruku、 Kramdown 、 Python Markdown ）：
{: .callout}
もちろん、スタイルシートを適切な方法で使用できます。
.callout {
float: right;
}
この構文をサポートしている場合は、埋め込みマークアップがなく、コンテンツエディタで変更する必要のないスタイルシートの要約という、両方の長所があります。
CSS <！> nbsp; 3ハックを使用して、 pure Markdown で優れたソリューションを見つけました：-）
image altが<または>で終わる場合、CSS 3コードの左または右のフロート画像に従います。
img[alt$=">"] {
float: right;
}
img[alt$="<"] {
float: left;
}
img[alt$="><"] {
display: block;
max-width: 100%;
height: auto;
margin: auto;
float: none!important;
}
埋め込みCSSが悪い：
別のファイルのCSS：
img[alt=Flowers] { float: right; }
テーブルを使用して画像を垂直パイプ（|）構文に揃えることで、非常に怠け者になりたいです。これは、一部のMarkdownフレーバーでサポートされています（また、テキスタイルでもサポートされています。あなたのボート）：
| I am text to the left |  |
または
|  | I am text to the right |
これは最も柔軟なソリューションではありませんが、私の単純なニーズのほとんどに適しています。マークダウン形式で読みやすく、CSSや生のHTMLを覚える必要はありません。
ALTタグとaltタグのCSSセレクターを使用した上記のメソッドの代替手段があります...代わりに、次のようなURLハッシュを追加します。
最初にMarkdownイメージコード：
追加されたURLハッシュ#centerに注意してください。
CSS <！> nbsp; 3属性セレクターを使用してCSSにこのルールを追加し、特定のパスを持つ画像を選択します。
img[src*='#left'] {
float: left;
}
img[src*='#right'] {
float: right;
}
img[src*='#center'] {
display: block;
margin: auto;
}
このようなURLハッシュは、クラス名を定義するのとほぼ同じように使用できるはずであり、一部の人がそのソリューションについてコメントしたようなALTタグの誤用ではありません。また、追加の拡張機能も必要ありません。フロートの右または左、または必要に応じて他のスタイルに対しても実行します。
さらにきれいにするには、スタイルシートにp#given img { float: right }を置くか、<head>にstyleタグでラップするだけです。次に、マークダウンを使用します。
<div style="float:left;margin:0 10px 10px 0" markdown="1">
</div>
Markdown内の属性markdown可能性。
テーブルを使用する learnvstの回答は、非常に読みやすいため（Markdownを書く目的の1つです）、気に入っています。
ただし、GitBookのMarkdownパーサーの場合、空のヘッダー行に加えて、テーブルを認識して適切にレンダリングするために、その下に区切り線を追加する必要がありました。
| - | - |
|---|---|
| I am text to the left |  |
|  | I am text to the right |
区切り線には、少なくとも3つのダッシュ---を含める必要があります。
Pythonで実装する場合、追加できる拡張機能があります。 HTMLキー/値ペア、およびクラス/ IDラベル。構文は次のとおりです。
{: style="float:right"}
または、埋め込まれたスタイリングがあなたのボートを浮かせない場合、
{: .floatright}
対応するスタイルシート、stylish.css：
.floatright {
float: right;
/* etc. */
}
greg said として、MarkdownにHTMLコンテンツを埋め込むことができますが、Markdownのポイントの1つは、 CSS / HTMLマークアップの知識が豊富にある（または、その点で）これが私がしていることです：
Markdownファイルでは、すべてのwikiエディターに、すべての画像を次のように埋め込むように指示するだけです。
'<div> // Put image here </div>`
（もちろん、彼らは<div>の意味を知らないが、それは問題ではない）
したがって、Markdownファイルは次のようになります。
<div>
![optional image description][1]
</div>
[1]: /image/path
そして、ページ全体をラップするCSSコンテンツでは、イメージタグを使って何でもできます：
img {
float: right;
}
もちろん、CSSコンテンツを使用してさらに多くのことができます（この特定の場合、imgタグをdivでラップすると、他のテキストが画像にラップされなくなります...これは単なる例です）。私見では Markdown のポイントは、技術に詳しくない人々がCSS / HTMLに出入りしたくないということです。CSSコンテンツを作成するのはWeb開発者の責任ですこれにより、ページはできるだけ汎用的かつクリーンになりますが、編集者はそのことを知る必要はありません。
同じタスクがあり、これを追加して画像を右に揃えました：
<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>
画像を左または中央に揃えるには、置き換えます
<div style="text-align: right">
with
<div style="text-align: center">
<div style="text-align: left">
最も簡単なのは、次のように画像を中央のタグで囲むことです...
<center></center>
Markdownで行うことはすべてここでテストできます- http://daringfireball.net/projects/markdown/ディンガス
もちろん、<center>は廃止される可能性がありますが、シンプルで機能します！
