32.5 Positioning graphics in HTML output

HTML positioning attributes are not compatible with CSS; therefore, by default, DITA2Go omits these attributes for HTML output. Use the positioning properties available in format configuration files instead; see §7. Configuring output formats.

See also:

§32.4.3 Omitting paragraph tags around graphics

When you use CSS, you can center graphics with DITA2Go macros. For example, to center all images:

[GraphStartMacros]
* = <div class="img">
[GraphEndMacros]
* = </div>

See §32.4.2 Replacing or surrounding a graphic with macro code.

Include in CSS:

div.img {text-align: center; }

Or, if DITA2Go maintains CSS for your project (see §31.8.3 Overriding styles in DITA2Go-generated CSS files):

[CSSEndMacro]
div.img {text-align: center; }

You have to use <div> because CSS applies text-align only to block elements, and <img> is not a block element.

To add a space above an image:

[GraphStartMacros]
GraphicID = <br>

This method produces a space just before the <img> tag.

See also:

§32.8.1 Excluding image size attributes from HTML

Previous Topic:  32.4.3 Omitting paragraph tags around graphics

Next Topic:  32.6 Specifying HTML image attributes

Parent Topic:  32. Including graphics in HTML

Sibling Topics:

32.1 Locating graphics files for HTML

32.2 Specifying options for HTML graphics

32.3 Omitting graphics from HTML output

32.4 Selecting and modifying graphics

32.6 Specifying HTML image attributes

32.7 Providing (or omitting) alternate text for images

32.8 Scaling images for HTML

32.9 Creating image maps for HTML

32.10 Supplying a background image or watermark