html - 将文本与居中的图标对齐

Question

我有以下组件代码

      <div>
        <icon
          HeaderText={<p className="text-center">{translations.show}</p>}
          FooterText={<p>{translations.hide}</p>}
          color={this.concept}
          className="u-pv--sm"
        >
          {getList}
        </icon>
      </div>

当我应用现有的文本中心类时，它只会将文本移动到中心而不是图标。有什么方法可以在不对文本中心类进行任何更改并且可能不使用内联样式的情况下将两者都移动到中心吗？

谢谢

Answer 1

当您申请 text-center 时会发生什么到 div而不是 <p> .

我的意思是这样的:

<div class="text-center">
        <icon
          HeaderText={<p>{translations.show}</p>}
          FooterText={<p>{translations.hide}</p>}
          color={this.concept}
          className="u-pv--sm"
        >
          {getList}
        </icon>
      </div>