如何在div中垂直居中元素？

我正在練習製作一個表格，我想將表格元素放置在行的中心左側，以便如何自動完成表格。這是我迄今爲止嘗試過的一些jsFiddle。如何在div中垂直居中元素？

如何垂直居中表單的標籤元素？

2011-11-03 deztructicus

您是否試圖垂直居中標籤？ –

@Steve Adams是的。例如。「反饋」可以在選擇框旁邊垂直居中 – deztructicus

給label相同的高度input filed有&給line-height你label。像這樣：

.element label { 
    float: left; 
    font-weight: 700; 
    height: 30px; 
    line-height: 30px; 
    width: 156px; 
}

來源

2011-11-03 06:46:42 sandeep

這是有效的。但是，這是下面的CSS指南？這感覺有點哈克... – deztructicus

是不是一個哈克。當我們想要文本垂直中間時，我們使用這種技術。 – sandeep

不hacky，這是在每個瀏覽器完美的作品。要使用line-height垂直居中文本是最好的選擇。 – scumah

您可以使用jQuery並在元素加載後設置位置。小幅調整HTML（分配ID）：

  <div class="element"> 
       <label id="feedback">Feedback: </label> 

       <select multiple="multiple" name="feedback" size="4" id="selectbox"> 
        <option value="">Option1</option> 
        <option value="">Option1</option> 
        <option value="">Option2</option> 
        <option value="">Option3</option> 
        <option value="">Option4</option> 
        <option value="">Option5</option> 
       </select> 
      </div>

的Javascript：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    var ht = $("#selectbox").height(); 
    var ht2 = $("#feedback").height(); 
    ht = $("#selectbox").offset().top + (ht-ht2)/2; 
    $("#feedback").offset({ top: ht }); 
}); 
</script>

來源

2011-11-03 06:57:40

不管怎麼說寫這麼多東西只是讓你把文字居中 –

嚴格CSS（標籤上的ID分配）

 <div class="element"> 
      <label id="feedback">Feedback: </label> 

      <select multiple="multiple" name="feedback" size="4"> 
       <option value="">Option1</option> 
       <option value="">Option1</option> 
       <option value="">Option2</option> 
       <option value="">Option3</option> 
       <option value="">Option4</option> 
       <option value="">Option5</option> 
      </select> 
     </div>

而CSS：

.element select { 
    height: 200px; 
} 

.element label#feedback { 
    margin-top: 85px; 
}

來源

2011-11-03 07:03:41

如何在div中垂直居中元素？

回答

相關問題