react-share组件图标与前置文本的样式对齐问题

要解决文本和FacebookIcon的对齐问题，最可靠的方式是利用Flex布局，直接让父容器控制子元素的垂直居中：

方案一：Flex布局（推荐） #

将文本和图标包裹在一个父容器中，设置display: flex和align-items: center，同时可以用gap控制两者的间距：

import { FacebookIcon } from "react-share";

function App() {
  return (
    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
      <span>分享到Facebook</span>
      <FacebookIcon size={32} round />
    </div>
  );
}

export default App;

这种方式不需要单独调整每个元素的样式，Flex布局会自动让子元素在垂直方向上居中，同时gap属性能轻松控制文本和图标之间的距离，比手动设置margin更简洁。

方案二：垂直对齐属性 #

如果不想用Flex，也可以给文本和图标同时设置vertical-align: middle，覆盖组件默认的基线对齐：

import { FacebookIcon } from "react-share";

function App() {
  return (
    <>
      <span style={{ verticalAlign: "middle", marginRight: "8px" }}>分享到Facebook</span>
      <FacebookIcon size={32} round style={{ verticalAlign: "middle" }} />
    </>
  );
}

export default App;

注意必须给文本和图标都设置这个属性，只给文本加的话，图标还是会保持默认的基线对齐，导致错位。

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