浮動小数点数の隣にあるCSS/htmlの中心のテキスト

Question

数字とテキストが重ねて表示されたアイテムのリストがあります。横に並んでいる数字の横にテキストを縦に整列させようとしています。私は数字とテキストを浮動小数点数の中に残しました - おそらく別のアプローチをとる必要がありますか？ exmapleここで働いてください - 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; 
      } 
     } 
     } 
    } 
    } 
} 

私は持ってしようとしていますテキストの長さにかかわらず、 "Count"（左の数字）に対して垂直に整列します。どんな入力も歓迎です！ありがとう。

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>