Html 标记和图像对齐

我正在制作一个网站，每个月都会在期刊上发表文章。这很简单，我认为使用降价编辑器（如StackOverflow中的编辑器）将是完美的

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

---

在当前系统中，我看不到这样做的方法-可能吗？

您可以在Markdown中嵌入HTML，这样您就可以执行以下操作：

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

Continue markdown text...

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

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

[1]: /image/path

继续标记文本。。。

![book]（/images/book01.jpg）

---

属性

markdown

在markdown中的可能性。

甚至更干净的方法是只将

p#给定的img{float:right}

放在样式表中，或者放在

中，并用

样式

标记包装。然后，只需使用标记

！[Alt text]（/path/to/img.jpg）

嵌入CSS不好：

![Flowers](/flowers.jpeg)

另一个文件中的CSS：

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

---

最简单的方法是将图像包装在中心标记中，如下所示

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

！[Alt试验](http://upload.wikimedia.org/wikipedia/en/b/bc/Wiki.png)

任何与降价有关的东西都可以在这里测试-

---

当然，

可能会被弃用，但它很简单而且有效

我喜欢通过使用表格将图像与垂直管道（

|

）语法对齐，从而变得超级懒惰。这是由一些降价口味支持的（如果这能让你的船漂浮起来，也可以支持）：

或

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

许多标记“额外”处理器支持属性。因此，您可以包括一个类名称，如So（PHP标记额外）：

或者，或者（Maruku，）：

当然，您可以用正确的方式使用样式表：

如果您支持这种语法，它将为您提供两全其美的效果：没有嵌入的标记，并且样式表的抽象程度足以使您的内容编辑器不必修改。

作为greg，您可以在标记中嵌入HTML内容，但标记的一个要点是避免有大量（或任何）内容CSS/HTML标记知识，对吗？我就是这么做的：

在我的Markdown文件中，我只是指示我的所有wiki编辑器将所有图像嵌入如下内容：

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

Continue markdown text...

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

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

[1]: /image/path

---

当然，你可以做更多的CSS内容。。。（在这种特殊情况下，使用div包装

img

标记可以防止其他文本对图像进行包装…不过，这只是一个例子），但我认为，降价的重点是，您不希望潜在的非技术人员介入CSS/HTML的细节。。作为一名web开发人员，您需要尽可能使包装页面的CSS内容具有通用性和干净性，但您的编辑器也不需要知道这一点。

如果您在Python中实现它，则有一种方法允许您添加HTML键/值对和类/id标签。其语法是：

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

或者，如果嵌入式样式不能使您的船漂浮

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

使用相应的样式表，

style.css

：

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

我喜欢使用表格，因为它可读性很强（这是写标记的目的之一）

但是，在GitBook的Markdown解析器中，除了一个空的标题行之外，我还必须在下面添加一个分隔行，以便识别和正确呈现表：

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

---

分隔线至少需要包含三个破折号--

我在纯降价中找到了一个很好的解决方案，使用了一点CSS3 hack：-）

---

我有一个替代上面使用ALT标记和ALT标记上的CSS选择器的方法。。。相反，请添加如下URL哈希：

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

Continue markdown text...

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

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

[1]: /image/path

首先是您的降价图像代码：

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

注意添加的URL哈希#中心

现在使用CSS3属性选择器在CSS中添加此规则，以选择具有特定路径的图像

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

---

您应该能够像定义类名一样使用这样的URL哈希，而不是像一些人评论的那样滥用ALT标记。它也不需要任何额外的扩展。也可以为“左右浮动”或任何其他您可能需要的样式执行一项操作。

我有相同的任务，我通过添加以下内容将图像向右对齐：

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

要使图像向左或居中对齐，请替换

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

与

这是我的工作

清理并标准化，方法是分别剥离不必要的

div

并在

img

标记中添加一个结束斜杠，即`而不是

div

我更喜欢使用

span

进行内联缩进。对于完整的段落居中

div

是好的，甚至是简单的

p

。对于一些经过消毒的解释器（如GitHub的解释器），这一点效果更好：@MattDiPasquale结束斜杠是不必要的。这是XHTML，不是HTML。我尝试在一篇鬼博客文章中嵌入一个图像；使用以下段落正确地围绕图像流动，而将段落和图像并排放置在方框中。什么？现在，每次更改标记内容时，您都必须突然编辑一个外部文件？对我来说，这听起来不是一个好的解决方案。@JordanReiter这里的每个人都编写了一个由多个文件组成的程序，其中逻辑分布/组织在多个位置。我们这样做是为了维护。为什么会有如此痛苦和可怕的不同？Markdown允许非程序员用户创建内容，它不应该依赖于必须在服务器上直接访问和编辑的文件。另一个例子：我认为将数据库中字段的名称硬编码到代码中是完全正常的，但基于数据库中字段的值硬编码是错误的（即，如果product.name=='Tulips'），因为您不能依赖值的稳定性。只要有人换花就行了

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

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