What Is The Best Way To Align Two Inline Span Elements To Left And Right Without Float?

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

Solution 1:

Try this css through flexbox

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

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

Solution 2:

You can use flexbox

Your container needs display: flex; align-items: center;

Then your children span needs to align themselves using margin-left: auto (this will be aligned to right)

Or margin-right: auto - this will be aligned to left

Solution 3:

Like Ryans Answer this one:

.left, .right{
  position: absolute
}

.left:{
  left: 0
}

.right{
  right: 0
}

But you have to consider, to put them in a parent with the position of relative, fixed or absolute.

Absolute positioned elements in a parent with mentioned positions can be moved around with the parent in case you want them on a specific position on your page whereas absolute positioned elements in a container without specifig position attribute will always overlay the other elements and have a position relative to your browser window.

Solution 4:

Since, you asked a way using text-align, there is a propery text-align-last which does align the elements to far end when its value is justify.

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

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

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

But, it doesn't have much browser support yet.

Solution 5:

You can use these css to align the images as well as the whole content to move wherever you want.

The position:absolute makes your content to be in a fixed position so that you can easily move the inner div as your wish.

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