垂直对齐3 div与内联块

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?

我不能在这个里面对所有3个div进行垂直对齐。我也尝试过div,但没有。我能做什么?

<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

1 个解决方案

#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

您可以使用伪元素生成此元素,该元素将用作vertical-align:DEMO的引用

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

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

用于行高的游乐场笔

#1