我认为vertical-align应该使用内联元素。然而，由于某种原因，灰色div中的一切都与顶部对齐，而不是底部。
<div style="position:absolute; top:130px; right: 80px; width: 230px; background-color:Gray; height:30px;" class="defaultText" id="pager">
<span style="vertical-align:bottom;">Page Size:</span>
<select style="vertical-align:bottom; font-size:8pt; margin-top: 0; margin-left:3px; height:16px; text-align:center;">
<option value="50">50</option>
<option value="100">100</option>
<option value="200">200</option>
<option value="500">500</option>
<option value="10000">*</option>
</select>
<div style="float:right;">
<span style="vertical-align:bottom; color:Blue; cursor: pointer; margin-right: 10px;"><</span>
<input style="vertical-align:bottom; height:12px; font-size:8pt; width: 20px;" type="text" data-bind="value: pageNum" />
<span style="vertical-align:bottom;"> of </span>
<span style="vertical-align:bottom;" data-bind="text: numPages"></span>
<span style="vertical-align:bottom; color:Blue; cursor: pointer; margin-left: 5px;">></span>
</div>
</div>
解决方法
除非你正在处理一个表格单元格，否则什么是垂直对齐方式，使元素相对于相邻元素，特别是文本对齐。所以，灰色div中的元素应该相互排列，而不是div的底部。参见
http://phrogz.net/css/vertical-align/index.html的例子。
