vertical-align after pull-right in bootstrap

Question

I want the element which is pulled right to be vertical-aligned, but I didn't succeed, I've been searching online for a while, some say that I should also specify a line-height value, but it didnt' work for me.

.float-vertical-align {
  vertical-align: middle;
  line-height: 20px;
  border: 1px solid red;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
    <div class="navbar-header"><a href="#" class="navbar-brand">Sample</a>
    </div>
    <div class='pull-right float-vertical-align'>
      <span>Some text here</span>
    </div>
  </div>
</nav>

Answer 1

vertical-align is not meant to be used with block elements.

The confusion, in my opinion, sets in when people try to use vertical-align on block level elements and get no results. If you have a small div inside a larger div and want to vertically center the smaller one within, vertical-align will not help you. - CSS-Tricks

Here's a possible solution and common pattern for vertical centering:

.float-vertical-align {
  border: 1px solid red;

  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
    <div class="navbar-header"><a href="#" class="navbar-brand">Sample</a>
    </div>
    <div class='float-vertical-align'>
      <span>Some text here</span>
    </div>
  </div>
</nav>