React Bootstrap CSS 对齐

Question

我正在使用以下 div 来生成附加图片。有没有推荐的方法让两个图标对齐？

<div className='my_node'>
        
        <div style = {{display:"flex"}}>
         
         <Button variant="light" style={{margin: '0px'}} onClick={handleShow}><BiEdit className="transparent-layer"  /></Button>
          <div  style={{ paddingTop: '2px',  boxSizing: 'content-box'}} > {data.label} </div>
          <CloseButton style ={{paddingTop: '6px', marginLeft:"auto"}} name ="deleteNode"/>
        </div>
        
      </div>

这是我的相关导入：

import { Handle } from 'react-flow-renderer';
import 'reactjs-popup/dist/index.css';
import CloseButton from 'react-bootstrap/CloseButton';
import 'bootstrap/dist/css/bootstrap.min.css';
import "bootstrap-icons/font/bootstrap-icons.css";
import Modal from 'react-bootstrap/Modal'
//import Button from 'react-bootstrap/Button';
//import InputGroup from 'react-bootstrap/InputGroup';
import { Form, Button, FormControl, InputGroup } from "react-bootstrap";
import {BiEdit}  from 'react-icons/bi';

编辑 这是下面Junaid建议的图片。灰色方块仍然可见/影响文本。

Answer 1

使用弹性
将 flex 也添加到 Button 中

     <div style = {{display:"flex", alignItems: "center", justifyContent:"between"}}>
     <Buttonstyle 
         style={{display:"flex", alignItems: "center", justifyContent:"center", margin: '0px'}} 
         variant="light" 
         onClick={handleShow}
     >
         <BiEdit className="transparent-layer"  />
     </Button>