降价和图像对齐

您可以在Markdown中嵌入HTML,这样就可以执行如下操作:

<img style="float: right;" src="whatever.jpg">

Continue markdown text...

许多降价“额外”处理器支持属性。因此,您可以包括这样的类名(php markdown extra):

![Flowers](/flowers.jpeg){.callout}

或者,或者(马鲁古, Kramdown , Python Markdown ):

![Flowers](/flowers.jpeg){: .callout}

然后,当然,您可以用适当的方式使用样式表:

.callout {
    float: right;
}

如果您的支持这种语法,那么它将为您提供两个方面的最佳选择:没有嵌入的标记,以及足够抽象的样式表,不需要由内容编辑器修改。

我发现了一个很好的解决方案 纯降价 有点 CSS 3破解 -)

![image alt >](/image-right.jpg)
![image alt <](/image-left.jpg)
![image alt ><](/center-image.jpg)

当 image alt 以结束 < 或 > .

img[alt$=">"] {
  float: right;
}

img[alt$="<"] {
  float: left;
}

img[alt$="><"] {
  display: block;
  max-width: 100%;
  height: auto;
  margin: auto;
  float: none!important;
}

嵌入CSS错误:

![Flowers](/flowers.jpeg)

其他文件中的CSS:

img[alt=Flowers] { float: right; }

我喜欢用表格把图片和竖线排成一行,这真是太懒了。( | )语法。这是由一些降价风味(也支持 Textile 如果你的船浮起来的话):

| I am text to the left  | ![Flowers](/flowers.jpeg) |

或

| ![Flowers](/flowers.jpeg) | I am text to the right |

它不是最灵活的解决方案,但它很适合我的大多数简单需求,很容易以标记格式读取,而且您不需要记住任何CSS或原始HTML。

我有一个替代方法,上面的方法在alt标记上使用了alt标记和css选择器…相反,添加这样的URL哈希:

首先你的降价图片代码:

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

注意添加的URL哈希中心。

现在使用css_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 标签。然后,使用降价 ![Alt text](/path/to/img.jpg) .

<div style="float:left;margin:0 10px 10px 0" markdown="1">
    ![book](/images/book01.jpg)
</div>

属性 markdown 内部降价的可能性。

如果您在Python中实现它,那么 an extension 这样可以添加HTML键/值对和类/ID标签。其语法是:

![A picture of a cat](cat.png){: style="float:right"}

或者,如果嵌入的样式不能漂浮在你的船上,

![A picture of a cat](cat.png){: .floatright}

使用相应的样式表, stylish.css :

.floatright {
    float: right;
    /* etc. */
}

我喜欢 learnvst's answer 使用表格是因为它可读性很强(这是写标记的一个目的)。

但是,对于Gitbook的Markdown解析器,除了一个空的标题行外,我还必须在它下面添加一个分隔行,以便识别和正确地呈现表:

| - | - |
|---|---|
| I am text to the left  | ![Flowers](/flowers.jpeg) |
| ![Flowers](/flowers.jpeg) | I am text to the right |

分隔符行至少需要包含三个破折号 --- .

作为格雷戈 said 你可以在markdown中嵌入HTML内容,但是markdown的一个要点是避免有大量(或任何)CSS/HTML标记知识,对吗?这就是我要做的:

在我的markdown文件中,我只是指示所有的wiki编辑器嵌入用类似这样的东西包装所有图像:

'<div> // Put image here  </div>`

(当然…他们不知道什么 <div> 意思是,但那不重要)

所以标记文件如下所示:

<div>
![optional image description][1]
</div>

[1]: /image/path

在包装整个页面的CSS内容中,我可以用图像标记做任何我想做的事情:

img {
   float: right;
}

当然,您可以对CSS内容做更多的工作…(在这种特殊情况下,包装 img 使用DIV标记可防止其他文本在图像上换行…不过,这只是一个例子),但我认为 降价 您不希望潜在的非技术人员进入和退出CSS/HTML。作为一个Web开发人员,你应该让你的CSS内容尽可能的通用和干净地包装页面,但是你的编辑器也不需要知道这一点。

我有相同的任务,我将图片右对齐,添加以下内容:

<div style="text-align: right"><img src="/default/image/sms.png" width="100" /></div>

要将图像左对齐或居中,请替换

<div style="text-align: right">

具有

<div style="text-align: center">
<div style="text-align: left">

最简单的方法是用中心标签包装图像,就像这样…

<center>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</center>

与降价有关的任何事情都可以在这里测试- http://daringfireball.net/projects/markdown/dingus

当然, <center> 可能不推荐使用,但它很简单而且很有效!