將文字與中間的圖標對齊

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>

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