html - 尝试垂直对齐图标和 div

Question

我正在使用 materializecss ，我需要帮助才能将内容垂直居中对齐。我不擅长 CSS。

https://jsfiddle.net/Shank09/z0pu0znm/

我尝试过 line-height、font-size 和 margin。

这是图片:

HTML代码:

   <div class="col s12 m6">
      <div class="card">
         <div class="card-content">
            <span class="card-title">
              <i class="material-icons">business_center</i>
                My List
              <span id="listcount">
                (12)
              </span>
              <i class="material-icons right">search</i>
              <span class="new badge yellow" data-badge-caption="">
                1
              </span>
              <span class="new badge red" data-badge-caption="">
                12
              </span>
              <span class="new badge green" data-badge-caption="">
                1
              </span>
            </span>

我的目标是:

Answer 1

这个怎么样？ https://jsfiddle.net/z0pu0znm/1/

我在图标周围添加了一个额外的父元素来包含它们。他们有一个 margin-left: auto; 本身不会做任何事情。这就是父元素发挥作用的地方。

.card .card-content .card-title {
  display: flex;
  align-items: center;
}

这使用 Flexbox . Flexbox是快速对齐一堆东西的好方法。在这种情况下，align-items 然后垂直居中。我建议研究一下 Flexbox，因为从长远来看，它会为您省去很多麻烦!