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';

编辑下面是图像 post Junaid 的建议。灰色方块仍然是 visible/impacting 文本。

Answer 1

使用弹性
也为 Button 添加 flex

     <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>

React Bootstrap CSS 对齐

React Bootstrap CSS alignment

css

reactjs

react-bootstrap