align text with the icon in center

Question

I have following code for a component

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

When i apply the existing text-center class it only moves the text to center and not the icon. Is there any way i could move both in center without making any changes to text-center class and possibly not using inline style?

Thanks

Answer 1

What happens when you apply text-center to the div instead of the <p> .

I mean like this:

<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

Have you tried using justify content?

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

When text-center doesn't work for me, this usually works