浮動數字旁邊的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; 
      } 
     } 
     } 
    } 
    } 
} 

我想有這麼不管文本的長度是多少 - 它都與「計數」（左邊的數字）垂直對齊。任何投入都會受到歡迎！謝謝。

Answer 1

我父

.wrapper { 
 
    margin: 0 auto; 
 
    max-width: 600px; 
 
} 
 

 
.featured-posts { 
 
    counter-reset: section; 
 
} 
 
.featured-posts .featured-posts--posts .featured-post { 
 
    margin-bottom: 40px; 
 
    width: 100%; 
 
} 
 
.featured-posts .featured-posts--posts .featured-post .featured-post--wrapper { 
 
    margin: 0 auto; 
 
} 
 
.featured-posts .featured-posts--posts .featured-post .featured-post--count { 
 
    width: 45px; 
 
    color: red; 
 
    height: 100%; 
 
    display: block; 
 
    font-size: 30px; 
 
} 
 
.featured-posts .featured-posts--posts .featured-post .featured-post--body { 
 
    width: 350px; 
 
    max-width: 100%; 
 
    margin: 0 auto; 
 
    color: black; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.featured-posts .featured-posts--posts .featured-post .featured-post--body a { 
 
    cursor: pointer; 
 
    text-decoration: none; 
 
    color: black; 
 
    transition: color 0.2s ease-in; 
 
} 
 
.featured-posts .featured-posts--posts .featured-post .featured-post--body a:hover { 
 
    color: red; 
 
}

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