Vertically aligning validation summary text with CSS - html

Question

I am using some CSS classes to manipulate my validation summary. Currently, I only show the first error. I wish to align this error inside its div. However my vertical-align properties seem to be having no effect. I can see that they are applied when I inspect the element with firebug in Firefox, yet they don't render as vertically aligned (they sit at the top). The other elements of the classes render correctly.
My div
<div style ="float: left; max-width: 200px; height: 75px; vertical-align:middle">
#Html.ValidationSummary(false)
</div>
My CSS classes
.validation-summary-errors li {
color: #b94a48;
vertical-align: middle;
}
.validation-summary-errors ul li:nth-child(n+2) {
display: none;
}
JSfiddle: http://jsfiddle.net/9ejZz/1/

Answer 1

vertical-align only apply to cell elements such as <td> or elements that have the css rule display:table-cell
See this example : http://jsfiddle.net/V9by8/
You should provide a jsfiddle for your problem, I could help you center it
UPDATE
Updataed with your code http://jsfiddle.net/9ejZz/6/

Answer 2

Six methods for centering something vertically. Pick your poison. This question seriously comes up once a week...
http://www.vanseodesign.com/css/vertical-centering/
Line-height
<div id="parent">
<img src="image.png" alt="" />
</div>
#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}
Table
<div id="parent">
<div id="child">Content here</div>
</div>
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
Negative Margins
<div id="parent">
<div id="child">Content here</div>
</div>
#parent {position: relative;}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
Stretching
<div id="parent">
<div id="child">Content here</div>
</div>
#parent {position: relative;}
#child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
}
Equal Padding
<div id="parent">
<div id="child">Content here</div>
</div>
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
Floater Div
<div id="parent">
<div id="floater"></div>
<div id="child">Content here</div>
</div>
#parent {height: 250px;}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#child {
clear: both;
height: 100px;
}