3

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

Gaucho_9
  • 265
  • 1
  • 3
  • 11

1 Answers1

8

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>

G-Cyrillus
  • 101,410
  • 14
  • 105
  • 129
  • Oki, hope you understood how vertical-align works :) – G-Cyrillus May 18 '14 at 14:56
  • Not enterily. I have tried set on the 3 divs elements height:100%. Than they had the same height as li, but vertical align didn't work. Can you give a link to understand this function with pseudo element? Thanks for the answer. – Gaucho_9 May 18 '14 at 14:59
  • @Gaucho_9 i do not have a link at this time, but vertical-align applied on inline-boxes needs 2 boxes or 1 box and a line-height . one boxe + line-height, vertical-align will take line-height as reference to adjust the box alignement value. 2 boxes , values on both boxes (can be different will adjust to height of each others and will still mind the line-height if set heigher than the the higest boxe. here a test page to play with : http://codepen.io/anon/pen/bLaEu – G-Cyrillus May 18 '14 at 16:32