React中如何将图标与文本/段落居中对齐？

针对你遇到的<GrTools>这类图标无法和文本居中对齐的问题，给你几个实用的解决方法：

方法一：直接给图标添加居中样式 #

图标是独立元素，不会自动继承父元素的文本居中规则，你可以给图标添加专属的CSS样式：

1. 在CSS文件中添加规则：

/* 匹配所有Gr开头的图标组件，或者给图标单独加类更精准 */
GrTechnology, GrTools {
  display: block;
  margin: 0 auto;
}

或者给图标统一加一个类名（比如icon-center），再写CSS：

.icon-center {
  display: block;
  margin: 0 auto;
}

2. 修改JS代码里的图标标签，添加上这个类：

<GrTechnology className='responsive-image icon-center' size='30px'/>
<GrTools className='icon-center' size="30px"/>

方法二：将图标与对应文本放入同一居中容器 #

如果需要图标和文本保持关联（比如图标在文本上方/同一行），可以把它们放在同一个容器里统一设置居中：

1. 修改JS代码，把图标和对应的p标签包裹在一个容器中：

<div className="icon-text-wrap">
  <GrTechnology className='responsive-image' size='30px'/>
  <p className='content lead mb-4'> Paragraph</p>
</div>
<div className="icon-text-wrap">
  <GrTools size="30px"/>
  <p className='content lead mb-4'> Paragraph</p>
</div>

注意：这里把原来重复的id='content'改成了class='content'——HTML中id必须唯一，重复id会导致样式和JS选择异常。

2. 在CSS中给这个容器添加居中样式：

.icon-text-wrap {
  text-align: center;
  margin: 50px auto;
}
/* 如果需要图标和文本在同一行且垂直居中，用Flex布局 */
.icon-text-wrap.inline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px; /* 图标和文本之间的间距 */
}

补充：修复原有代码的小问题 #

你当前代码中多个p标签使用了同一个id='content'，不符合HTML规范，建议全部改为class，然后CSS选择器调整为：

p.content {
  text-align: center;
  width: 100%;
  margin: 50px auto;
}

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