将两个内联跨度元素左右对齐而不浮动的最佳方法是什么？

Question

.recentactivitycontent span{
    display: inline-block;
    line-height: 60px;
    vertical-align: middle;
}

<div class="recentactivitycontent" >
    <span class="myh4 grey pull-left"><img src="images/exampleuser.png" alt="user"/> Admin added one new member.</span>    
    <span class="myh4 pull-right"><img src="images/clock.png" alt="clock"/> 3 min ago</span>    
</div>

正如您所看到的，这是一个父 div，里面有两个 span 元素。使用该float属性时，问题是它们不会保持垂直对齐。

我想使用类似text-align属性的东西来精确对齐内联元素。设置height等于line-heightwithdisplay:inline-block是可能的，但是我每次都必须设置 height 属性，这是我不想要的。

Answer 1

通过 flexbox 尝试这个 css

.recentactivitycontent {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recentactivitycontent .pull-left {
  display: flex;
  align-items: center;
}