Question

<ul>
    <li class="more">aaa</li>
    <li class="moretwo">aaa</li>
    <li class="more">aaa</li>
</ul>

.more {
  background-color: red;
  height: 50px;
  vertical-align:middle;
}

.moretwo {
  background-color: green;
  height: 50px;
  vertical-align:sub;
}

Why in this example vertical align doesn’t working?
Is possible to make? If yes, how can i make it?

LIVE EXAMPLE: http://jsfiddle.net/gQM68/ with yours answers

Answer 1

the text is aligned with respect to its line height so either you go through increasing line height and then applying vertical align

or

using padding-top

you can check this link for reference

http://jsfiddle.net/gQM68/2/

or

http://www.w3schools.com/cssref/pr_pos_vertical-align.asp