垂直居中標籤和列表中的輸入

我有一個表格，我將要放入一個滑塊，我想要將每個輸入字段的標籤垂直居中在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

垂直居中標籤和列表中的輸入

回答

相關問題