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

我有一个表格，我将要放入一个滑块，我想要将每个输入字段的标签垂直居中在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/

来源

2013-03-14 Chris G-Jones

这是垂直对齐一个很好的参考：[了解垂直对齐或“如何（不）垂直居中内容”]（http://phrogz.net/css/vertical-align/index.html） – 2013-03-14 23:14:42

这是一篇很好的文章，但这些例子似乎只是有固定高度时工作吗？我的问题是，其中一些标签实际上有两行文字，而不是1 – 2013-03-14 23:26:57

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

来源

2013-03-14 23:22:13 Alex

哇感谢，完美的作品。如果你不介意我可以问（i）在函数中做什么以及math.ceil部分是什么？ – 2013-03-14 23:43:56

它代表索引，math.ceil基本上将任何小数四舍五入到最接近的整数，因此您不会得到像素的任何分数。很高兴工作！这比css imo更可靠。 – Alex 2013-03-15 00:18:23

-1

，而无需编辑您的设置太多，我把它看起来更加集中。我说：

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

来源

2013-03-14 22:59:06 ashley

，它对于单行标签不起作用： -/ – 2013-03-14 22:59:54

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

回答

相关问题