Spans Vertical Align With Float

I have a problem with vertically align 3 spans inside a div. It's easy to achieve, but vertical align doesn't work when i use float. I want that lightblue bar to be vertically cent

Solution 1:

You can use display: inline-block; along with vertical-align: middle; on your <span> elements instead of float. This way they are positioned next to each other too and you can apply the vertical alignment:

.containerspan {
  display: inline-block;
  vertical-align: middle;
}
.text-1 {
  padding-right: 10px;
}
.bar {
  background-color: lightblue;
  border-radius: 5px;
  height: 5px;
  width: 150px;
}
.text-2 {
  padding-left: 10px;
}

<divclass="container"><spanclass="text-1">Text 1</span><spanclass="bar">&nbsp;</span><spanclass="text-2">Text 2</span></div>