### 23.6.2 Aligning anchored graphics

To override the FrameMaker alignment of an individual graphic or a group of graphics (for example):

[GraphAlign]

; Graphic ID = desired alignment to text, one of these: left, right,

; top, texttop, middle, absmiddle, baseline, bottom, or absbottom

ImgGroupA = left

ch01f853 = absmiddle

The [GraphAlign] section sets the HTML align attribute of the <img> tag itself; this attribute controls only vertical position and left/right floats in HTML.

Floating graphics might hide text

If you set alignment to left or right, you are also telling the graphic to “float”. This might result in the text that follows (such as a caption, if captions are below the image in your FrameMaker document) disappearing behind the image. If this happens, for the graphic involved you should also specify:

[GraphEndMacros]

* = <br clear="all" />

Or, you can specify "left" or "right" instead of "all", depending on the effect you want.

Realign graphics independently of anchors

To position graphics independently of the paragraphs in which their frames are anchored, if you are using CSS you must also specify the following:

[Graphics]

; GraphAlignAttributes = Yes (default, allow when set in [GraphAlign])

; or No (no align attribute in img tags even if set in [GraphAlign]).

; Default is reversed to No if UseCSS=Yes.

GraphAlignAttributes = Yes

When you use CSS, by default Mif2Go ignores any alignment attributes you specify in [GraphAlign]; see §22.5 Understanding how CSS affects other options. If you are not using CSS, by default Mif2Go uses the alignment attributes in [GraphAlign].

Realign graphics horizontally

For graphics in anchored frames that are neither inline nor run-in (float in HTML) you can specify a horizontal position different from that used in FrameMaker:

[GraphParaAlign]

; Graphic ID = desired alignment for containing para: left, right,

; or center, primary method of centering standalone graphics

ch01f853 = left

The [GraphParaAlign] property sets the HTML align attribute for the paragraph in which the graphic frame is anchored; this is how Mif2Go controls horizontal alignment of graphics. For example, the following setting uses a wildcard (see §4.6 Using wildcards in configuration settings) to center-align all anchored graphics in HTML:

[GraphParaAlign]

* = center

However, the align="center" attribute does not work as specified by the W3C in most browsers.

Use CSS to center graphics

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

[GraphStartMacros]

* = <div class="img">

[GraphEndMacros]

* = </div>

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

Include in CSS:

div.img {text-align: center; }

Or, if Mif2Go maintains CSS for your project (see §22.8.4 Overriding styles in Mif2Go-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.

| 23.6.1 Positioning graphics anchored in empty paragraphs |  | 23.6.3 Indenting images |