定位和框架图像

图片是增强文本的极好方式，无论是用来说明一个观点、展示而非只是告诉，或者帮助读者与文本建立联系。

开箱即用的时候，图像和文本的行为就像油和水一样。图像不喜欢和文本共享空间。它们对此有点“强势”。这就是为什么我们专注于调整图像宏中的控件，这样你就可以让图像和文本流畅地融合在一起。

在定位图片时，你可以采取两种方法：

定位属性

AsciiDoc支持在块级图像上使用`align`属性以在块内对齐图像（例如，左对齐、右对齐或居中）。命名属性`float`可以应用于块级和内联图像宏。Float会将图像拉到页面的一侧，并分别围绕它包裹块级或内联内容。

这是一个浮动块图像的例子。紧跟图像后面的段落或其它块将会浮动进入图像旁边的可用空间中。图像也会被水平定位在图像块的中央。

一个块状图像被向右拉，并在块中居中。

Unresolved directive in image-position.adoc - include::example$image.adoc[tag=float]

这是一个浮动行内图像的示例。该图像将漂浮到段落文本的右上角。

内联图像被拉到段落文本的右侧。

Unresolved directive in image-position.adoc - include::example$image.adoc[tag=in-float]

当你使用命名属性时，CSS会以内联的方式添加（例如，style="float: left"）。这是一种不好的做法，因为当你想要自定义主题时，它会使页面变得更难设置样式。使用CSS类来处理这类事情要好得多，这些类在AsciiDoc术语中映射到角色。

以下是上面的例子，现在配置为使用在默认的Asciidoctor样式表中映射到CSS类的角色：

使用定位角色阻止图像宏

Unresolved directive in image-position.adoc - include::example$image.adoc[tag=role]

使用定位角色的内联图像宏

Unresolved directive in image-position.adoc - include::example$image.adoc[tag=in-role]

下表列出了所有内置角色，用于定位图像。

仅仅设置图片的浮动方向并不足以实现适当的定位。这是因为，默认情况下，图片和文本之间没有留出空间。为了解决这个问题，我们为使用定位命名属性或角色的图片增加了合理的边距。

如果您想定制图像样式，比如自定义页边距，您可以向样式表中添加自己的样式（可以使用基于默认样式表的个人样式表，也可以将样式添加到docinfo文件中）。

Warning

角色（.）的简写语法还不能与图像样式一起使用。

通常会用边框来装饰图像，以便进一步将其与文本区分开来。你可以为任何块级或内联图像设置 thumb 角色（或简写为 th）的样式，使其显示为缩略图。

Note	thumb` 角色不会改变图像的尺寸。为此，您需要为图像指定高度和宽度。

这是在博客文章中添加图片的一个常见例子。图片向右浮动并有边框，使其在文本中更加突出。

Unresolved directive in image-position.adoc - include::example$image.adoc[tag=frame]

注意我们给图片添加了`related`角色。这个角色技术上来说不是必需的，但它赋予了图片语义意义。

当你开始浮动图像时，你可能会发现周围有太多的内容也随之浮动。你需要的是一种清除浮动的方法。这可以通过另一个角色`float-group`来实现。

假设我们已经让两张图片浮动，使它们并排放置，我们希望下一个段落出现在它们下方。

[.left]
.Image A
image::a.png[A,240,180]

[.left]
.Image B
image::b.png[B,240,180,title=Image B]

图片下方的文字。

当这个例子被转换后，在浏览器中查看时，段落文本会出现在图片的右侧。要修正这个行为，你只需要将图片以自包含浮动的方式“分组”到一个块中。以下是操作方法：

[.float-group]
--
[.left] .Image A image::a.png[A,240,180]

[.left]
.Image B
image::b.png[B,240,180]
--

图片下方的文字。

这次，文本会出现在我们希望它出现的图片下方。