Vertical-Align for a cell

[hbulgarini]

Hello !

I have a question , i was trying to get the elements vertically aligned in the center of each cell .
I'm trying to accomplish this by using the style: {'verticalAlign':'middle'} property on the columns definition, but i'm afraid the values are not getting centered as i need.

Is there any special way to perform this align?

Thanks!

[gary-menzel]

I think this question is better asked on the #react-table Slack channel (there is a badge at the top of the readme). It is going to be related to the fact that react-table uses flexbox to layout all the cells (so you may have to provide some additional wrapping around your cell content to get verticalAlign to work). It will be better answered by a wider group of people on the #react-table channel. Thanks.

[hbulgarini]

Ok! thanks!

[micahstubbs]

@hbulgarini did you get an answer on slack? I'm curious what the solution here was too

[micahstubbs]

ok, I found a solution. use this CSS to override the default styles

div.rt-tr {
  align-items: center;
}

[lininu]

for td can use
div.rt-td { align-self: center; }

[Method42]

Add style: {'display': 'flex', 'flexDirection': 'column', 'justifyContent': 'center'} for each column

[SungjungC]

for me, it works
.ReactTable .rt-td {text-align: center; }