我正在做一个网站,每月发表文章的问题。这很简单,我认为使用Markdown编辑器(如Stack Overflow中的WMD)将是完美的。

然而,他们确实需要在给定的段落中使图像右对齐的能力。

我看不出在目前的体制下有什么办法能做到这一点——有可能吗?


当前回答

更简洁的方法是将p#给定的img {float: right}放在样式表中,或者放在<head>中并包装在样式标签中。然后,只需使用markdown ![Alt text](/path/to/img.jpg)。

其他回答

许多Markdown“额外”处理器支持属性。所以你可以像这样包含一个类名(PHP Markdown Extra):

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

或者,备用的(我的,Kramdown, Python Markdown):

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

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

.callout {
    float: right;
}

如果您的文档支持这种语法,那么它将为您提供两全其美的服务:没有嵌入标记,样式表足够抽象,无需内容编辑器修改。

我发现了一个很好的解决方案在纯Markdown与一个小css3 hack:-)

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

当图像alt以<或>结束时,遵循css3代码浮动图像在左侧或右侧。

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

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

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

如果你用Python实现它,有一个扩展可以让你添加HTML键/值对,以及类/id标签。它的语法是:

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

或者,如果嵌入式样式不能让你的船浮起来,

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

使用相应的样式表styles .css:

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

我有同样的任务,我把我的图像向右对齐,添加了这个:

<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>![Alt test](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)</center>

任何与Markdown有关的东西都可以在这里测试- http://daringfireball.net/projects/markdown/dingus

当然,<center>可能已弃用,但它很简单,而且可以工作!