FluentUI DetailsList Center SelectBox

Question

In my DetailsList my rows are selectable. My customer wants the checkboxes to be centered vertically. Normally I do this with following css:

display: 'flex',
align-items: 'center'

But in this case, this approach has no impact. I do this in the method onRenderCheckbox which looks like this:

  private _onRenderCheckbox(props: IDetailsListCheckboxProps | undefined, defaultRender: any){
    if (!props) return null;
    const customStyles = {                      
        cell: {
            display: 'flex',
            alignItems: 'center'
        }
    };
    return defaultRender ? defaultRender({ ...props, styles: customStyles }) : null;       
}

This is what it looks like now - the (radio) checkbox is not vertically centered :(