将两个内联跨度元素左右对齐而没有浮点的最佳方法是什么？ [英] What is the best way to align two inline span elements to left and right without float?

问题描述

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

以下是css

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

}

两个span元素里面。使用float属性时，问题是它们不会保持垂直对齐。

As you can see in image here is a parent div with two span elements inside.When using float property,the problem is that they will not remain vertically aligned.

我想使用一种方式像text-align属性来完全对齐inline elements.Height = line-height with display：inline-block可能，但是我必须每次都设置height属性，我不想要。

I want to use a way like text-align property to exactly align inline elements.Height=line-height with display:inline-block is possible but then I have to set height property every time which I don't want.

任何建议欢迎..

推荐答案

通过flexbox尝试这个css

Try this css through flexbox

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

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

这篇关于将两个内联跨度元素左右对齐而没有浮点的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！