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?
Centering an image in a table cell
-
- Sr. Propeller Head
- Posts: 247
- Joined: Thu May 24, 2018 3:11 pm
- Location: Queensland, Australia
Re: Centering an image in a table cell
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
Rob
Re: Centering an image in a table cell
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.
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.
-
- Senior Propellus Maximus
- Posts: 2630
- Joined: Wed Apr 14, 2010 8:01 am
- Location: Surrey, UK
Re: Centering an image in a table cell
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:
but this doesn't, because the <p> that the image is sitting in is left-aligned.
.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>
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
Report bugs at http://www.madcapsoftware.com/bugs/submit.aspx.
Request features at https://www.madcapsoftware.com/feedback ... quest.aspx