时间戳

首页 > 解决方案 > 在两个段落旁边放一个图标。图标应垂直居中，紧挨段落

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

问题描述

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

成为

这就是我所拥有的：

原样

这是我的代码：

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

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

标签： htmlcssbootstrap-4iconsrow

解决方案

看起来您正在使用 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>

推荐阅读