HTML CSS vertical align in LI

Like this

demo

css

li { float:left; margin-right: 10px; width: 96px; height: 96px; vertical-align: bottom; border:1px solid red; list-style-type:none; } li img{ display:inline-block; height:96px; width:96px; } li span{ display:block; } 

html

<ul> <li><img src="" alt="img"/> <span>1</span></li> <li><img src="" alt="img"/> <span>1</span></li> </ul> 

I think what you meant is that you want your text inside the links to be aligned inside of the 96x96 box at the bottom.

If I am correct in that assumption, you can assign a line-height to the li element (a block element) that is equal to its height (96px). Then you can assign a smaller line-height (such as 20px) to the child link itself (an inline element) and use vertical-align: bottom; on the link.

JSFiddle example here.