Question

我有一个表格，我要放入滑块，我想在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;
}

链接到网站http://www.foresightaus.com.au/form/

Answer 1

使用这个非常简单的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();

Answer 2

如果没有太多编辑你的设置，我会让它看起来更集中。我补充说：

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

垂直居中列表中的标签和输入

2 个答案: