html - float 数字旁边的 CSS/html 中心文本

Question

我有一个元素列表，其中的数字和文本相互堆叠 - 我正在努力尝试将文本与它并排放置的数字旁边垂直对齐。我的数字和文本只是 float 在一个 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

我会使用 display: flex; align-items: center; 在父元素上

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