I want to vertically align text both when the text fits in one line AND when the text fits in two lines. There's a jsFiddle here.
Suppose my HTML looks like this:\[code\]<div class="Container"> <div class="SomeClass">test text</div> <div class="SomeClass">some very very long text</div> // this text is cut</div>?\[/code\]And that my CSS looks like this:\[code\].Container{ padding:3px 0px 6px 0px; height:30px; margin:30px 30px;}.SomeClass{ height:30px; float:left; width:100px; overflow:hidden; border:1px solid black; text-align:center; font-family:"Trebuchet MS"; font-weight:bold; font-size:13px; line-height:28px;}?\[/code\]At the moment, I'm using the \[code\]line-height\[/code\] property: I set it to the height of the container, and that vertically aligns the text. The problem is that when the text fits in 2 lines, this doesn't work anymore. Note that the \[code\].Container\[/code\] items must be of a certain height/width AND be left with \[code\]overflow:hidden;\[/code\]Let me know if you have some suggestions.Thanks.