React-bootstrap centering checkboxes in columns - reactjs

Question

I have a ListGroup with ListGroupItems that get populated by some data. Part of that data is a description, which obviously varies in length.
<ListGroup className="signal-info-container">
{
signalConstants[this.props.signalType].map((signal, i) => (
<ListGroupItem key={i}>
<Row>
<Col xs={3}>
{signal.name}
</Col>
<Col xs={5}>
{signal.description}
</Col>
<Col xs={3} className="aggregation">
<Checkbox inline={true}></Checkbox>
<Checkbox inline={true}></Checkbox>
<Checkbox inline={true}></Checkbox>
<Checkbox inline={true}></Checkbox>
</Col>
</Row>
</ListGroupItem>
))
}
</ListGroup>
Sometimes that description needs to wrap (as seen below).
What I would like to have happen is for the checkboxes in the right column vertically align in the center of the col.
I have tried to override react-bootstrap with some custom css. The following css results in the previous image.
.aggregation {
display: flex;
align-items: center;
}
Not sure how relevant it is, but the columns have a height of 0px. What confuses me is why the single-line descriptions are centered, but multi-line descriptions are not. Here is an image of the 0px cols:
I have noticed that there seems to be some sort of label applied to the checkbox which is getting centered by the applied CSS, but I need it applied on the actual checkbox instead. I have just removed the title attribute from my checkboxes. The effect is still the same (labels weren't showing up anyways).

Answer 1

You need to apply display: flex; align-items: center; to the entire <tr> so it recognizes the multi-line descriptions. So you should add a class to the <Row> that uses these rules.

Answer 2

Try modifying your component as so:
<ListGroup className="signal-info-container">
{
signalConstants[this.props.signalType].map((signal, i) => (
<ListGroupItem key={i}>
<Row>
<Col xs={3}>
{signal.name}
</Col>
<Col xs={5}>
{signal.description}
</Col>
<Col xs={3}>
<CheckboxRow>
<Checkbox title='min' inline={true}></Checkbox>
<Checkbox title='max' inline={true}></Checkbox>
<Checkbox title='avg' inline={true}></Checkbox>
<Checkbox title='sum' inline={true}></Checkbox>
</CheckboxRow>
</Col>
</Row>
</ListGroupItem>
))
}
</ListGroup>
Where CheckboxRow is
const CheckboxRow = ({children}) => (
<div style={
"display": "flex",
"justify-content": "center",
"align-items": "center"
}>
{children}
</div>
)
or extract that CSS out to a stylesheet if you have one.
Reason for adding the extra div layer is that it's safer than trying to override styles on the column components, since it's purpose is not to lay elements our horizontally.
The 'justify-content: center' centers the items horizontally, 'align-items: center' centers the items vertically.