How to vertically center in DIV? "vertical-align: middle;" doesn't work [duplicate]

I would like to have the ul vertically centered next to . I tried to do so about one hour and I missed my goal... Am I blind or just not knowing? "vertical-align: middle;" didn't work! Any tricks?

vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvv

Here is my CSS code:

  #ovnb-header{
  width: 100%;
  height: 56px;
  color: #FFFFFF;
  padding: 8px 0;
  overflow-x: hidden;
  font-family: "Helvetica";
  background-color: #000000;
}

#ovnb-content{
  width: 80%;
  height: 100%;
  background-color: red;
  margin: 0 auto;
}

#ovnb-primary{
  display: inline-table;
  background-color: green;
  width: 50%;
  max-height: 56px;
  float: left;
}

#ovnb-image{
  height: 56px;
  width: 56px;
  vertical-align: middle;
}

#ovnb-secondary{
  background-color: blue;
  width: 50%;
  height: 100%;
  float: right;
}

#ovnb-items_list{
  float: right;
  list-style-type: none;
  padding: 0;
  margin-top: auto;
  height: auto;
  width: 90%;
}

.ovnb-item, .ovnb-item a, .ovnb-item p{
  float: left;
  padding-left: 15px;
  margin: 0;
}

And my HTML Code:

<header id="ovnb-header">
  <nav id="ovnb-content">
    <div id="ovnb-primary">
      <a href="#"><img id="image" alt="image"></a>
      <ul id="ovnb-items_list">
        <li class="ovnb-item">
          <p>Word</p>
        </li>
        ...
      </ul>
    </div>
    <div id="ovnb-secondary">
    </div>
  </nav>
</header>