Centering an image in a table cell

This forum is for all Flare issues related to PDF, eBook, Microsoft Word, Adobe FrameMaker, XPS, and XHTML book targets.

Centering an image in a table cell

Postby dtmenges on Tue Feb 11, 2020 1:50 pm

I am trying to center an image, a small icon, in a table cell. I added the following class and applied it to the cell.

td.centeredHorizontal
{
text-align: center;
vertical-align: middle;
}

The image centers in the XML editor but not in preview or in the actual build for either media. However, if I add a local override from the ribbon, the image centers. Is this a bug or my misunderstanding of HTML tables?
dtmenges
Propeller Head
 
Posts: 97
Joined: Tue Oct 28, 2008 6:38 am
Location: Goshen, IN

Re: Centering an image in a table cell

Postby robdocsmith on Tue Feb 11, 2020 7:05 pm

The style seems to work for me in my builds. I'm just wondering if there is an override somewhere? Perhaps the image is contained in a <p> tag that has different formatting, or the table has an overriding tablestyle that changes things?

Rob
robdocsmith
Propeller Head
 
Posts: 95
Joined: Thu May 24, 2018 3:11 pm

Re: Centering an image in a table cell

Postby dtmenges on Wed Feb 12, 2020 6:39 am

Thanks for responding.

I've looked for overrides in the text editor and even removed all formating and reset the table style. Also, gone into the style sheet with the text editor to make sure there wasn't something in the .css that was goofy. What is really frustrating is that I have a "text-align: right;" in a class that works correctly. My workaround has been to use a div that is centered.
dtmenges
Propeller Head
 
Posts: 97
Joined: Tue Oct 28, 2008 6:38 am
Location: Goshen, IN

Re: Centering an image in a table cell

Postby ChoccieMuffin on Wed Feb 12, 2020 8:54 am

As a tip, in case you need to centre other stuff, not just a table cell, you could create a generic class .centered that you could apply to all sorts of things:

.centered
{
text-align: center;
}

If you let us look at the code for that table row we may be able to make suggestions, though I suspect robdocsmith has hit the nail on the head.

This works:
Code: Select all
                    <td class="TableStyle-1medium-2to5auto-BodyB-Column1-Body1" style="text-align: center;">
                        <p>
                            <img src="images/Help icon.jpg" />
                        </p>
                    </td>
 


but this doesn't, because the <p> that the image is sitting in is left-aligned.
Code: Select all
                    <td class="TableStyle-1medium-2to5auto-BodyB-Column1-Body1" style="text-align: center;">
                        <p style="text-align: left;">
                            <img src="images/Help icon.jpg" />
                        </p>
                    </td>
Started as a newbie with Flare 6.1, now using Flare 2019r1 and 2020.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
ChoccieMuffin
Senior Propellus Maximus
 
Posts: 2429
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK


Return to Printed Documentation Targets

Who is online

Users browsing this forum: No registered users and 3 guests

cron