将文字与中间的图标对齐

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>

当我应用现有的文本中心类时，它仅将文本移动到中心而不是图标。 我有什么办法可以在不更改text-center类的情况下既可以居中移动又可以不使用内联样式？

谢谢

Answer 1

将text-center而不是<p>应用于div时会发生什么。

我的意思是这样的：

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

Answer 2

您是否尝试过使用证明内容？

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

如果文本中心对我不起作用，通常可以