在两个段落旁边放一个图标。图标应垂直居中，紧挨段落答案

【问题标题】：putting an icon next to two paragraphs. Icon should be vertically in center right next to the paragraphs在两个段落旁边放一个图标。图标应垂直居中，紧挨段落
【发布时间】：2019-12-17 02:57:36
【问题描述】：

我想在两个段落旁边放置一个图标，使图标恰好位于两个段落左侧的中心（垂直）。这就是我想要的：

这就是我所拥有的：

这是我的代码：

<div class="row">
  <div class="col-sm-12"> <span>
      Promo Code
    </span>
    <icon type="Success filled"></icon>
    <p class="text-success">PlayerRegistrationPromotion Applied</p>
    <p>
      $ in credits available</p>
  </div>
</div>

附注：请注意，拼写和句子是虚拟数据，无关紧要。这里的样式很重要。那么获得想要的结果的最佳方法是什么？

【问题讨论】：

请提供相关的 CSS。

标签： html css bootstrap-4 icons row

【解决方案1】：

这就是你所追求的吗？

https://codepen.io/polinq/pen/abzBYoy

澄清： display: flex on inner 会将元素分组为两列。默认情况下，flex-direction 将为 row，因此您会将这些元素放在一行中。我还添加了另一个 div（内部两个），因此它将文本“PlayerRegistrationPromotion Applied”和关于信用的文本分开。如果您要删除它，文本将彼此相邻，而不是在单独的行中。

我希望一切都清楚！

    <div class="row">
  <div class="col-sm-12"> <span>
      Promo Code
    </span>
    <div class="inner">

        <icon type="Success filled"><img src="http://placekitten.com/60/90" alt=""></icon> 
      <div class="inner-2">
    <p class="text-success">PlayerRegistrationPromotion Applied</p>
    <p>
      $ in credits available</p>
      </div>
    </div>
  </div>
</div>

.inner {
  display: flex;

}

【讨论】：

【解决方案2】：

看起来您正在使用 Bootstrap(?)。您可以做到这一点的一种方法是将“促销代码”文本放在跨越整个宽度的一行上，然后在下一行的几列中显示复选标记图标，在其余列中显示附加文本。

这样的事情可能会让你开始：

<div class="row">
  <div class="col-12">Promo Code</div>
  <div class="col-3 text-center"><icon type="Success filled"></icon></div>
  <div class="col-9"><p class="text-success">PlayerRegistrationPromotion Applied</p><p>$ in credits available</p></div>
</div>

【讨论】：