Centering text around an image

[r.laviolette]

Hi,

I'm using RoboHelp HTML v9.

I'm inserting an image (see below) into a help topic.  I'd like to see the text around the button appear centered on the button.  Is this possible?

Thanks!

[Willam_van_Weelden]

Hi,

This should work, but it’s a bit of a bother as it just increases the line height of the entire paragraph to match the image.

1. Find the height of the image in pixels.

2. For the paragraph that holds the button, set the css line-height property to the image height.

For instance, when your image is 21 pixels high:

Text text.

Or better:



In the css:

p.img {

line-height: 21px;

}



In the topic:

Text text.

Alternatively, you can position the image so it fits better into the line:

Greet,

Willam

[r.laviolette]

William,

Thanks for the ideas.  I'm not sure what happened but if you included images in your post, they didn't appear.

I'm going to try to shrink the height of the images and at the same time, increase the line height.

Rene.

[Willam_van_Weelden]

I included some example HTML but that got stripped by the filter. This is what I posted:

<p style=”line-height: 21px;”>Text <img /> text.</p>

Or better:

In the css:

1. p.img {

line-height: 21px;

}

In the topic:

<p class=”img”>Text <img /> text.</p>

Alternatively, you can position the image so it fits better into the line:

<img src=”” style=”position: relative; top: 5px;” />

[Captiv8r]

Hi there

Hopefully Willam won't mind me offering an alternate method.

As he said, it will cause the spacing to change.

I do this all the time but in a different way. Typically it's one or two images that give me fits. When that happens, I just double-click the image to open the properties, then I apply a bottom margin by clicking the Margins button. Start with perhaps 5 pixels. Then insert a minus sign before the text to cause it to become a negative value (as in -5px). This will likely take a few tries using different values to get it spot on.

Cheers... Rick

Helpful and Handy Links RoboHelp Wish Form/Bug Reporting Form Begin learning RoboHelp HTML 7, 8 or 9 within the day! Adobe Certified RoboHelp HTML Training SorcerStone Blog RoboHelp eBooks