Icons inside table cells are not vertically centered

[rcdailey]

First, I am not a frontend developer. I am using Docusaurus which I use for documentation pages and my understanding is they use MDX for parsing and rendering Markdown, so I'm coming here with this question assuming it's the right place. I apologize in advance if I am in the wrong place.

I have a markdown table that I render an icon inside of using Iconify:

| Service     |                        Supported                        |
| ----------- | :-----------------------------------------------------: |
| Sonarr (v3) | <icon icon="fa6-solid:xmark" height="24" color="red" /> |
| Sonarr (v4) |             ![Yes](/icon/checkmark-16.png)              |
| Radarr      |             ![Yes](/icon/checkmark-16.png)              |

Ignore the last two rows. The first row (under the header row) is the one I'm playing with. When this renders it looks like this:

The red "X" isn't vertically centered. When I inspect the HTML for this specific cell, I see this:

<td align="center">

If I change it to this, it looks much better:

<td align="center" style="display: flex; align-items: center; justify-content: center;">

I can't tell if these styles are coming from MDX or Docusaurus. I just don't have the expertise to know where to look for the corresponding CSS. At the very least, I'm hoping someone here can help me find out. Otherwise, maybe there's a way to make table cells vertically center content so it looks better.

Thank you!

[ChristianMurphy]

Welcome @rcdailey! 👋
Sorry you ran into a spot of trouble.

MDX + remark-gfm here is translating the GFM table to HTML following the GFM spec https://github.github.com/gfm/#tables-extension-
Neither the GFM spec, remark-gfm, nor MDX add styles.

Those are something which would be added from your project using a stylesheet.
You can apply your desired styles across the project with something like

td[align=center] {
  display: flex;
  align-items: center;
  justify-content: center;
}

For how to add a global stylesheet, follow docusaurus' example here: https://docusaurus.io/docs/styling-layout/

[rcdailey]

Thank you so much for the quick reply! Upon trying your global CSS, it seems to have some negative impact on the cell borders. It looks like it's putting 1px borders adjacent to each other, which makes some borders appear to be 2px instead of 1 in width. Example:

Also if you look at the very bottom of the table, you'll see that the border is misaligned as well.

[ChristianMurphy]

Yes, it may require additional styles to make the table look exactly how you want it to for your design system.
There are great resources which introduce working with CSS like:

• https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics
• https://www.w3schools.com/Css/
• https://web.dev/learn/css/

And the Docusaurus community may be able to provide some guidance on how to create a theme for their platform https://docusaurus.io/community/support