How to set justify center with Tr in chakra-ui?

Question

I take a reference from official.

https://chakra-ui.com/docs/components/table/usage

When I put an Image on Td, the other Td elements out of center.

I try to set justifyContent={'center'} on Tr, but it's not working.

Here is my code, all of the component are from chakra-ui

                    <TableContainer>
                        <Table size="sm">
                            <Thead>
                                <Tr>
                                    <Th>To convert</Th>
                                    <Th>into</Th>
                                    <Th isNumeric>multiply by</Th>
                                </Tr>
                            </Thead>
                            <Tbody>
                                <Tr bg={'pink'} justifyContent={'center'}>
                                    <Td>
                                        <Stack align={'center'} direction={'row'}>
                                            <Image
                                                height="48px"
                                                width="48px"
                                                src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80"
                                                alt="Green double couch with wooden legs"
                                                borderRadius="lg"
                                            />
                                            <Text fontSize={'14px'} color={'gray.700'}>
                                                Test Test Test RTest
                                            </Text>
                                        </Stack>
                                    </Td>
                                    <Td>millimetres (mm)</Td>
                                    <Td isNumeric>25.4</Td>
                                </Tr>
                                <Tr>
                                    <Td>feet</Td>
                                    <Td>centimetres (cm)</Td>
                                    <Td isNumeric>30.48</Td>
                                </Tr>
                                <Tr>
                                    <Td>yards</Td>
                                    <Td>metres (m)</Td>
                                    <Td isNumeric>0.91444</Td>
                                </Tr>
                            </Tbody>
                            <Tfoot>
                                <Tr>
                                    <Th>To convert</Th>
                                    <Th>into</Th>
                                    <Th isNumeric>multiply by</Th>
                                </Tr>
                            </Tfoot>
                        </Table>
                    </TableContainer>

Next.js project about css reset code, I think I have add tbody, thead, tr, th, td should be fine.

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}
body {
    line-height: 1;
}
ol,
ul {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

In <ChakraProvider />, I just add breakpoints and fonts setting:

const fonts = {
    heading: `'Open Sans', sans-serif`,
    body: `'Raleway', sans-serif`,
};

// 2. Update the breakpoints as key-value pairs
const breakpoints = {
    base: '0px',
    sm: '320px',
    md: '768px',
    lg: '960px',
    xl: '1200px',
    '2xl': '1536px',
};

// 3. Extend the theme
const theme = extendTheme({ breakpoints, fonts });

return (
  <ChakraProvider theme={theme}>
    <MyAppComponent />
  </ChakraProvider>
);

Answer 1

Chakra UI's <Tr> component isn't a flex or grid container, so justifyContent shouldn't have any effect on alignment. Try replacing justifyContent with verticalAlign instead.

<Tr bg={'pink'} verticalAlign={'middle'}>

For convenience, here's a CodeSandbox playground with the provided use case.