将文本与中心的图标对齐答案

【问题标题】：align text with the icon in center将文本与中心的图标对齐
【发布时间】：2017-08-07 16:12:52
【问题描述】：

我有以下组件代码

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

当我应用现有的文本中心类时，它只会将文本移动到中心而不是图标。有没有什么办法可以在不更改文本中心类并且可能不使用内联样式的情况下在中心移动？

谢谢

【问题讨论】：

请为此提供实际的 HTML 和 CSS。可以帮助别人。 ;)

标签： html css reactjs jsx

【解决方案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>

【讨论】：

试过它不会将文本中心应用于图标或文本

【解决方案2】：

您是否尝试过使用 justify 内容？

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

当文本中心对我不起作用时，这通常会起作用

【讨论】：