触发时如何将我的反应语义模式置于中心

Question

这是我的模式代码：

     render() {
    return <Fragment>
        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className} trigger={<Button className="ui red icon left labeled button " >
            <i aria-hidden="true" class="trash icon" ></i>Delete</Button>}>
            <ModalHeader>{'Delete Customer'}</ModalHeader>
            <ModalBody>
                <p>Are you sure?</p>
            </ModalBody>
            <ModalFooter>
                <Button className="ui secondary button" onClick={this.handleClose}> cancel </Button>
                <Button className="ui red icon right labeled button" ><Icon name='remove' labelPosition='right' />delete</Button>
            </ModalFooter>
        </Modal>
    </Fragment>;
}

这里是调用我的模态的代码，当触发模态时，它位于下方的左侧直到下方，我尝试将size ='mini'放在

    <tbody className="">
                {!cusList || cusList.length <=0 ?
                    <tr>
                        <td colSpan="6" align="center"><b>No Customers yet</b></td>
                    </tr>
                    :this.state.cusList.map(cus =>
                    <tr className="" key={cus.customerId}>
                        <td className="">{cus.name}</td>
                        <td className="">{cus.address}</td>
                        <td className="">
                            <Button className="ui yellow icon left labeled button " ><i aria-hidden="true" class="edit icon"></i>Edit</Button>
                        </td>
                        <td className="">                                      
                                <DeleteCustomerModal/>
                        </td>
                    </tr>
                )}

Answer 1

仅通过在.css文件中添加以下代码，就能解决此问题。