Using captions under non-centered images?

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
SDWriterClmt
Propeller Head
Posts: 46
Joined: Wed May 30, 2018 1:22 pm

Using captions under non-centered images?

Post by SDWriterClmt »

Hi all. Been reading through posts on inserting captions under images. Haven't found a solution to my exact need. I want my images to have captions, but I do not want them centered. I want them indented a little from the left margin and I want their captions to be centered under the images. Is this possible?

First off, this is what I was using for a guide:
https://www.madcapsoftware.com/blog/201 ... aptions-2/

To illustrate, this is what I want:
Caption-question1.png
And here is the Snippet code I produced:

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
    <head>
    </head>
    <body>
        <div class="figure">
            <p>
                <img src="../Images/placeholder.png" />
            </p>
            <p class="figurecount" MadCap:autonum="<b>figure 1 - </b>">Topic Text</p>
        </div>
    </body>
</html>
And here is the code I added to my stylesheet:

Code: Select all

div.figure
 {
     //background-color: #eeeeee;
     //margin: 10px; 
     //border: solid 1px #cccccc;
     //padding: 10px;
	   text-align: center;
	 	z-index: 1;
     //margin-left: 63pt;
	font-family: Calibri;
 }

div.figure p.figurecount
 {
     mc-auto-number-format: '{b}figure {n+} - {/b}';
 }
You do not have the required permissions to view the files attached to this post.
Psider
Propellus Maximus
Posts: 815
Joined: Wed Jul 06, 2011 1:32 am

Re: Using captions under non-centered images?

Post by Psider »

I think what you need to do, after you insert the snippet in the topic and convert to HTML, then you need to set a width on the figure div. The width should be the width of the image you are inserting, because you want your caption centred under the image.
5. Now you can right-click the textbox (div) and align or resize it, right-click the image and change it to the correct image for the content and change the text after the figure #.
Post Reply