浮动数字旁边的CSS/html居中文本

Question

我有一个数字和文本堆叠在一起的项目列表-我正在努力尝试将文本与旁边的数字垂直对齐。我把数字和文本放在了一个div的左边--也许我需要采取不同的方法？请参阅此处的工作示例- https://codepen.io/ajmajma/pen/gRpxrQ?editors=1100

我的项目html结构是这样的：

  <div class="featured-posts wrapper">
  <div class="featured-posts--posts row">
    <div class="featured-post col-12">
      <div class="featured-post--wrapper">
        <div class="featured-post--body"><span class="featured-post--count">1</span><a href="/blog/1">10 Tips to Avoid Dry Flaky Winter Skin, Safely</a></div>
      </div>
    </div>
    <div class="featured-post col-12">
      <div class="featured-post--wrapper">
        <div class="featured-post--body"><span class="featured-post--count">2</span><a href="/blog/2">10 Ways to Spa at Home</a></div>
      </div>
    </div>
    <div class="featured-post col-12">
      <div class="featured-post--wrapper">
        <div class="featured-post--body"><span class="featured-post--count">3</span><a href="/blog/3">13 Healthy Ways Winterize Your Routine</a></div>
      </div>
    </div>
    <div class="featured-post col-12">
      <div class="featured-post--wrapper">
        <div class="featured-post--body"><span class="featured-post--count">4</span><a href="/blog/4">18 Things to Love About Our Follain Soap</a></div>
      </div>
    </div>
    <div class="featured-post col-12">
      <div class="featured-post--wrapper">
        <div class="featured-post--body"><span class="featured-post--count">5</span><a href="/blog/5">&lt;3 at First Site</a></div>
      </div>
    </div>
  </div>
</div>

CSS (SCSS)看起来像这样：

.featured-posts {
   counter-reset: section;

   .featured-posts--posts {
     .featured-post {
       margin-bottom: 40px;
       width: 100%;

       .featured-post--wrapper {
         margin: 0 auto;
       }

       .featured-post--count {
         width: 45px;
         float: left;
         color: red;
         height: 100%;
         display: block;
          font-size: 30px;
       }

       .featured-post--body {
         width: 350px;
         max-width: 100%;
         margin: 0 auto;
         color: black;

         a {
           cursor: pointer;
           text-decoration: none;
           color: black;
           transition: color 0.2s ease-in;


           &:hover {
             color: red;
           }
         }
       }
     }
   }
 }

我正在尝试这样做，无论文本的长度是多少-它是垂直对齐的“计数”(左边的数字)。欢迎任何意见！谢谢。