Center Graphic with Description
A How-To Recipe
The standard markup for displaying an attached graphic, or image, in the page, shown in the code block below, justifies the graphic on the left border of the text area.
This is shown below with an Example Graphic.
This is fine for content development and internal use. However, as content moves towards external publication a more formal presentation may be required.
The issue is thus how to center a graphic within the text bounties and document with description directly below.
SQI provides a simple markup framework that centers the graphic and selects the right style of the description. The graphic and description below show the results of using this markup framework.
Figure 1: Example of Centered Graphic/image
Steps to center graphic, or image, and provide a description are:
Special Formating in Description
From time-to-time the figure description may need to include the mono-spaced code formating. In that case repalce the figure markup line with:
<<HTML(<p class="figure">)>>Figure #: Description<<HTML(</p>)>>
For example, if a graphic shows the user should click the Exit button then the following markup
<<HTML(<p class="figure">)>>Figure #: Select `Exit` call-out Desciption<<HTML(</p>)>>
Figure #: Select Exit call-out Desciption