對齊div中的多個圖像

Question

<div class="title" >
    <div class="issues"> <h2>Issues</h2></div>
        <div class="dropdown"> 
            <span class="filter"><h3>Filter</h3></span> 
            <span class="project"><h3>Project</h3></span>  
            <img src="down-arrow.png" style="height: 13px;">
            <img src="Grid.svg" style="margin-left: 13px;">
            <img src="List deactivated.svg" style="height: 13px;">
        </div>

我希望最后兩個高度為 15px 的圖像與 div 的所有元素對齊。當我嘗試這樣做時，所有其他元素都會移出 div 並且它會變形。下面是我的 css 代碼。

 .title{
    margin-left: 192.5px;
    background: transparent;
    padding: 10px 0;
}
h3{
  display: inline;
}
.dropdown{
  margin-left: 76%;
  margin-top: -50px;
}

Answer 1

您可以嘗試使用Flexbox 。 例如：

 .dropdown { display: flex; align-items: center; justify-content: center; }