Vertical align 3 divs with inline-block

Question

I can't make vertical align all 3 divs inside this li. I have tried inside a div too, but nothing. What can I do?

<li style="list-style:none;border-bottom:1px solid white;height:60px;background-color:blue;padding-left:5%;padding-right:5%">
  <div style="max-width:39%;min-width:39%;display:inline-block;;vertical-align:middle;text-align:right">
    Equipo 1
  </div> 
  <div style="max-width:19%;min-width:19%;display:inline-block;vertical-align:middle;text-align:center">
    18/05<br>12:30
  </div> 
  <div style="max-width: 38%;min-width: 38%;display:inline-block;vertical-align:middle">
    Equipo 2
  </div>
</li>

Demo

Thanks

Answer 1

You need one of the inline-box to fit the height of parent, so others will vertical-align aside it.

You may use a pseudo element to generate this element wich will be used as reference to vertical-align: DEMO

li:before {
    content:'';
    display:inline-block;
    height:100%;
    vertical-align:middle;
}

<edit> playground pen for line-height</edit>