在不浮动的情况下，将两个内联span元素左右对齐的最佳方法是什么？

Question

    <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元素的父div。当使用float属性时，问题是它们不会保持垂直对齐。

我想使用像text-align属性的方式来精确对齐内联元素.Height =行高与显示：内联块是可能的但是我必须每次都设置高度属性我不会想。

欢迎任何建议......

Answer 1

通过flexbox尝试此css

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

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

Answer 2

您可以使用flexbox

您的容器需要显示：flex; align-items：center;

然后你的孩子需要使用margin-left：auto（这将与右边对齐）对齐自己

或者margin-right：auto - 这将与左侧对齐

Answer 3

像Ryans一样回答这个问题：

.left, .right{
  position: absolute
}

.left:{
  left: 0
}

.right{
  right: 0
}

但您必须考虑将它们放在position relative，fixed或absolute的父级中。

具有提到位置的父级中的绝对定位元素可以与父级一起移动，以防您希望它们位于页面上的特定位置，而没有指定位置属性的容器中的绝对定位元素将始终覆盖其他元素并具有相对于浏览器窗口的位置。

Answer 4

由于您使用text-align询问了某种方法，因此有一个text-align-last符合{{3}}，当其值为justify时，它会将元素与远端对齐。

＆＃13;

＆＃13;

.main{
  text-align-last: justify;
}

.child{
  display: inline-block;
  vertical-align: middle;
}

＆＃13;

<div class="main">
  <div class="child">hello</div>
  <div class="child">hey</div>
</div>

＆＃13;

＆＃13;

＆＃13;

但是，它还没有太多的浏览器支持。

Answer 5

您可以使用这些css对齐图像以及整个内容，以便随时随地移动。

位置：绝对使您的内容处于固定位置，以便您可以轻松移动内部div。

.myh4{
    position:absolute;
}
.pull-left{
    left:0;
}
.pull-right{
    right:0;
}