Vertical-align in UL LI?

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

Solution 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

Solution 2

you can use vertical-align with display:table-cell

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

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

Comments

[Dennis Traub]

Works for me (FF3). Which browser are you using?

[Anton]

must read this developer.mozilla.org/en/CSS/…

[Anton]

why you want to use sub use vertcal-align:bottom instead, also why you have used span?? see jsfiddle.net/gQM68/3

[My Head Hurts]

This will never vertically align anything. I don't downvote, but if I did, this would be one.