You can center graphics on the page or place them on the left or right side of the page with the settings for the paragraph containing the graphic.

1.Click in the paragraph containing the graphic. There shouldn't be any text in the paragraph as the result would not look good in the output.

2.Format the paragraph to position the graphic. For example you can left-justify, center or right-justify the paragraph or add space before and space after to separate the graphic from the paragraphs above and below it. (You can also add space around the graphic with the Spacing: setting in the Open Image dialog.

Formatting options:

Use the Paragraph tools in the Write tab or select the paragraph dialog icon at the bottom right corner of the Paragraph tools group to display the full Paragraph formatting dialog.

If you set the Display Size in the image dialog to % of page width or scaled to full page width, the zoom value you enter is relative to the container of the image. This is the page width if the image is inserted directly on the page or the table cell containing the image if the image is in a table.

In HTML output formats this makes the images responsive. This means that the images will automatically scale with the size of the window.

Use image styles for sizing images

Defining an image style allows you to set an absolute or relative width (% of page width) for all images in a class. This ensures that all the images will be displayed with the same width on the page without you having to apply individual settings to each image. You just need to select the style for the image.

Preventing excessive scaling

If the width is defined as any percentage less than 100% (i.e. up to 99.90%), the image will only expand up to its full native width but will not zoom further to prevent excessive scaling. Setting a width of 100% turns this off and allows unlimited scaling. The % of page width and scaled to full page width options do this for you automatically. The first sets the width to 99.90%, the second sets it to 100%.

Putting responsive images side by side

If you set the image widths to add up to less than 100% you can put multiple responsive images on the same line and they will display side by side. The only exception to this are images with captions: These must be put in tables if you want to display them side by side, because otherwise the caption container will create a new paragraph after every image, even if the images fit on the page side by side.

Responsive images in table cells

Note that when responsive images are in table cells their width is relative to the table cell, not to the page. So you could have three images in a table side by side in three cells, each with a width of 80%, for example. Each image will then be 80% of the width of the cell containing it, leaving 10% space on either side.

Responsive images with captions side by side

When images have captions they have an invisible container around the image that encloses the caption and keeps it with the image. This container always creates a new paragraph in HTML output. To put responsive images with captions side by side you must put them in a table. Otherwise each image will be in a separate paragraph, even if they would actually fit side by side.

1.Double-click on the graphic to re-open the Open Image dialog.

2.Select Left of text or Right of text in the Alignment: field.

3.Set the Padding: value to increase the amount of free space around the image. You can also set separate padding values for each side of the image. To do this quickly just click on the button in the Padding: field.

The wrapping is displayed in the editor and is supported in all output formats, including PDF.