试图垂直对齐图标和div

问题描述：

我正在使用materializecss，我需要帮助将内容垂直居中对齐。我不擅长CSS。试图垂直对齐图标和div

我已经与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>

我的目标：

我不完全确定你想对齐什么。你能澄清一下吗？ – Alec

我认为他的意思是将三个方块与“我的列表”标题*水平对齐* –

答

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

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

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

这使用Flexbox。 Flexbox是快速对齐一堆东西的好方法。在这种情况下，align-items垂直居中。我建议寻找Flexbox，因为从长远来看，它将为您节省大量的麻烦！

答

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

相关推荐