标题为中心，在引导自适应设计字体真棒圈

Question

我正在尝试完成以下任务（参见图片）：

<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<h1>5 BENEFITS FOR $5</h1>  
</div>
</div>

<div class="row">
<div class="col-md-6">
<h2>BENEFIT NAME</h2>
<p>A very brief but captivating description of the benefit.</p>
</div><!-- col -->

<div class="col-md-6">
<h2>BENEFIT NAME</h2>
<p>We’re just getting started - as our club grows, so will the benefits!</p>
</div><!-- col -->
</div> <!--row-->

<div class="row">
<div class="col-md-6">
<h2>BENEFIT NAME</h2>
<p>A very brief but captivating description of the benefit.</p>
</div><!-- col -->

<div class="col-md-6">
<h2>BENEFIT NAME</h2>
<p>We’re just getting started - as our club grows, so will the benefits!</p>
</div><!-- col -->
</div> <!--row-->

<div class="row">
<div class="col-md-6">
<h2>BENEFIT NAME</h2>
<p>A very brief but captivating description of the benefit.</p>
</div><!-- col -->

<div class="col-md-6">
<h2>AND MORE</h2>
<p>We’re just getting started - as our club grows, so will the benefits!</p>
</div><!-- col -->
</div> <!--row-->

</div> <!--container-->


#front-page-2 h2 {
  position: relative; /* Helps us control overlap */
  padding-left: 80px; /* Creates space for the Phone Icon */
  padding-top:15px;
  }

#front-page-2 h2:after {
  content: '\f111';
  font-family: fontAwesome;
  font-size: 2em;
  position: absolute;
  left: 0; /* Adjust as needed */
  top: 3px; /* Adjust as needed */
  }

我正在使用Bootstrap 4，每行有3行和两列col-sm-6。我需要的圈子，甚至排队。目前，当列标题的长度变化，例如“多”，圆不与其他人的阵容。我还希望每个col-sm-6都位于容器的中心，因此它与主标题5好处的中心位置为$ 5（请参见下图）。我还想在h2 title中使用真棒字体。

谢谢，朱尔斯

Answer 1

最简单的解决方案可能是使用position:absolute作为图标。<h2>是一个块元素，因此您可以轻松地将图标放置在左侧。圆圈的位置不取决于文字长度。

h2{position:relative;text-align:center}
.fa-circle{position:absolute;left:0;top:50%;transform:translateY(-50%)}

/*DEMO PURPOSE*/
h2{border:1px red solid;padding-top:1rem;padding-bottom:1rem}

<script defer src="https://use.fontawesome.com/releases/v5.7.0/js/all.js"></script>

<h2><i class="fas fa-circle"></i>Lorem Ipsum</h2>
<h2><i class="fas fa-circle"></i>Dolor sit Amet</h2>
<h2><i class="fas fa-circle"></i>Some text</h2>