Question

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

我已经使用line-height，font-size和margin进行了游戏。

这是图片：

HTML code：

   <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，因为从长远来看，它可以为您节省大量的麻烦！

Answer 2

似乎是this is what you want。

添加了CSS：

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

.card .card-content .card-title {
  justify-content: space-between;
}

.title > * {
  padding: 5px;
}

还在徽章+搜索图标周围添加.badges范围，并在标题文字周围添加.title范围。

尝试垂直对齐图标和div

2 个答案: