Css 在列表中垂直居中放置标签和输入

我有一个表格，我要放在一个滑块中，我想把每个输入字段的标签垂直地放在li的中心。有些标签有两行，有些只有一行。稍后我还想将所有单选按钮居中

到目前为止，我已经试过了，但不起作用

    <li class="fill-in">
        <label for="sasqNumber">SASQ number (today's date i.e. dd_mm_yyyy):</label>
        <input type="text" name="sasqNumber" id="sasqNumber" value="" />
    </li>

#test ul li.fill-in label{
    text-align:right;
    width:30%;
    float:left;
    vertical-align:middle; 
    display:table-cell;
    margin:0 5% 0 0;
}

SASQ编号（今天的日期，即dd_mm_yyyy）：

#测试ul li.填充标签{
文本对齐：右对齐；
宽度：30%；
浮动：左；
垂直对齐：中间对齐；
显示：表格单元格；
利润率：0.5%0.0；
}

---

链接到站点

无需对设置进行过多编辑，我让它看起来更中心。我补充说：

position: relative;
top: 50%;
margin: -15px 5% 0 0

---

使用以下非常简单的jquery脚本：

(function ($) {
$.fn.vAlign = function() {
    return this.each(function(i){
    var ah = $(this).height();
    var ph = $(this).parent().height();
    var mh = Math.ceil((ph-ah) / 2);
    $(this).css('margin-top', mh);
    });
};
})(jQuery);

然后对要垂直对齐的任何元素调用该函数：

$('#example p').vAlign();

---

实际上，它并不适用于单线标签：-/这是一篇关于垂直对齐的好参考：这是一篇好文章，但这些示例似乎只适用于固定高度的情况？我的问题是，有些标签有2行文字，而不是1行文字，这非常好用。如果你不介意的话，我可以问一下（I）在函数中做什么，以及math.ceil部分是什么？它代表索引，math.ceil基本上是将任何小数舍入到最接近的整数，这样你就不会得到任何像素的分数。很高兴它成功了！这比css imo更可靠。