如何使用CSS实现div与span的对齐？

我尝试让div显示在span旁边，但没能成功，不知道怎么实现二者的对齐，求解决方案。

现有代码 #

app.component.html #

<div class="content">
<div class="title">Titles</div>
<span class="icons"> images </span>
</div>

app.component.css #

.content{
    width: 100%;
    height:150px; 
}
.title{ 
    display:block;
    float: right;
    border:2px solid #ccc;
}
.icons{
    display:block;
    float: left;
    border:2px solid #ccc;
}

预期效果 #

解决方案 #

推荐使用Flexbox布局实现，这是现代CSS中最简便的并排对齐方案：

修改.content的样式，将其设为flex容器，通过属性控制元素的排列和对齐：

.content{
    width: 100%;
    height:150px; 
    display: flex;
    align-items: center; /* 实现垂直居中对齐 */
    justify-content: space-between; /* 让元素分别靠左右两端排列 */
}
.title{ 
    border:2px solid #ccc;
}
.icons{
    border:2px solid #ccc;
}

如果坚持用浮动布局，需给父容器添加清除浮动的规则，同时给子元素设置vertical-align: middle来优化对齐，但Flexbox的方式更简洁可靠，也更易维护。

内容的提问来源于stack exchange，提问作者EMahan K