React Bootstrap Image与FontAwesome图标尺寸及对齐问题求解

解决方案 #

你遇到的尺寸不匹配和垂直对齐问题可以通过以下步骤修复：

• 给承载两个元素的Col组件添加Bootstrap内置的flex布局与垂直居中类，统一控制子元素的对齐方式
• 取消图片的百分比宽度设置，改用和图标尺寸匹配的固定宽高，避免相对单位导致的尺寸不稳定
• 给图标添加垂直对齐类消除基线对齐带来的偏移

修改后的参考代码如下：

<Row>
  <Col xs={10}></Col>
  <Col xs="auto" className="d-flex align-items-center gap-3">
    <OverlayTrigger
      placement="right"
      delay={{ show: 250, hide: 400 }}
      overlay={backwards}
    >
      <Image 
        width="48px" 
        height="48px" 
        src="/assets/cofnij.jpg" 
        thumbnail 
        onClick={() => window.history.back()} 
      />
    </OverlayTrigger>
    <OverlayTrigger
      placement="right"
      delay={{ show: 250, hide: 400 }}
      overlay={backToMain}
    >
      <FontAwesomeIcon
        onClick={() => history.push("/")}
        icon={faWindowClose} 
        color="red" 
        size='3x'
        className="align-middle"
      />
    </OverlayTrigger>
  </Col>
</Row>

如果还有细微的位置偏差，可以给图标或图片添加少量的上下边距微调即可，比如给FontAwesomeIcon添加style={{ marginTop: '2px' }}调整。

内容的提问来源于stack exchange，提问作者FrancMo