Почему не работает vertical-align для inline-block?
Вы используете vertical-align для блочного элемента. А оно только для табличных работает (и еще инлайновых, кажется, но и там свои особенности). Используйте display: table-cell, например.jsfiddle.net/8p4cg/1/
Почему вы решили, что не работает? Какого поведения вы ждете от такого кода?