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.
Post Reply
dtmenges
Propeller Head
Posts: 97
Joined: Tue Oct 28, 2008 6:38 am
Location: Goshen, IN
Contact:

Centering an image in a table cell

Post by dtmenges »

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?
robdocsmith
Sr. Propeller Head
Posts: 247
Joined: Thu May 24, 2018 3:11 pm
Location: Queensland, Australia

Re: Centering an image in a table cell

Post by robdocsmith »

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
dtmenges
Propeller Head
Posts: 97
Joined: Tue Oct 28, 2008 6:38 am
Location: Goshen, IN
Contact:

Re: Centering an image in a table cell

Post by dtmenges »

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.
ChoccieMuffin
Senior Propellus Maximus
Posts: 2630
Joined: Wed Apr 14, 2010 8:01 am
Location: Surrey, UK

Re: Centering an image in a table cell

Post by ChoccieMuffin »

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 2023.
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx
Post Reply