試圖垂直對齊圖標和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>

我的目標：

來源

2017-07-18 Shank

我不完全確定你想對齊什麼。你能澄清一下嗎？ – Alec

我認爲他的意思是將三個方塊與「我的列表」標題*水平對齊* –

這個怎麼樣？ https://jsfiddle.net/z0pu0znm/1/

我在圖標周圍添加了一個額外的父元素來包含它們。他們有一個margin-left: auto;本身不會做任何事情。這是父元素進來的地方。

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

這使用Flexbox。 Flexbox是快速對齊一堆東西的好方法。在這種情況下，align-items垂直居中。我建議尋找Flexbox，因爲從長遠來看，它將爲您節省大量的麻煩！

來源

2017-07-18 20:56:24

好像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跨度。

來源

2017-07-18 20:56:10

試圖垂直對齊圖標和div

回答

相關問題