在两个段落旁边放置一个图标。图标应垂直位于段落旁边的中间

Question

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

这就是我所拥有的：

这是我的代码：

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

P.S： 请注意，拼写和句子是伪数据，没关系。这里的样式很重要。那么获得所需结果的最佳方法是什么？

Answer 1

这是您的追求吗？

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

说明：显示：内部的flex将元素分为两列。默认情况下，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;

}

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