垂直對齊標籤中的文本

我被要求將標籤中的文本垂直對齊表單中的字段，但我不明白他們爲什麼不移動。我曾嘗試使用vertical-align:top;和其他屬性（如bottom和middle）的內嵌樣式，但它不起作用。垂直對齊標籤中的文本

任何想法？

<dd> 
    <label class="<?=$email_confirm_class;?>" 
      style="text-align:right; padding-right:3px">Confirm Email</label> 
    <input class="text" type="text" 
      style="border:none;" name="email_confirm" 
      id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>" 
      tabindex="4" /> 
    * 
</dd>

來源

2009-10-12 Ian

要做到這一點，你應該改變輸入的vertical-align屬性。

<dd><label class="<?=$email_confirm_class;?>" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; border:none;" name="email_confirm" id="email_confirm" size="18" value="<?=$_POST['email_confirm'];?>" tabindex="4" /> *</dd>

這是一個更完整的版本。它已經在IE 8中測試過了，它可以工作。看到通過刪除垂直對齊的區別：從輸入中間：

<html><head></head><body><dl><dt>test</dt><dd><label class="test" style="text-align:right; padding-right:3px">Confirm Email</label><input class="text" type="text" style="vertical-align: middle; font-size: 22px" name="email_confirm" id="email_confirm" size="28" value="test" tabindex="4" /> *</dd></dl></body></html>

來源

2009-10-12 14:39:56

在我的經驗中，文本字段非常難以馴服，垂直填充的工作更可靠。 – Wabbitseason 2009-10-12 14:42:20

'vertical-align'在這裏不做任何事情（IE 8）。 – Joey 2009-10-12 14:42:49

我已經在IE8和FF（ubuntu）中測試了它，刪除了垂直對齊以查看效果，並且它工作正常。我更新了這個例子。 – 2009-10-12 16:13:00

你試過line-height？如果有多個行標籤，它不會解決您的問題，但它可以是一個快速解決方案。

來源

2009-10-12 14:40:36 Wabbitseason

謝謝！它在我的情況下工作... – jpsstavares 2011-12-12 15:40:38

保存了很多時間:) – 2017-03-07 08:36:06

這是我平時做的內部標籤，以「垂直對齊」文本：

label { 
    display: block; 
    float: left; 
    padding-top: 2px; /*This needs to be modified to fit */ 
}

它不會規模非常漂亮，但很有效。

來源

2009-10-12 14:48:23 peirix

vertical-align樣式用於表格單元格，所以在這裏不會爲你做任何事情。

要對齊的標籤，輸入框，您可以使用line-height：

line-height: 25px;

來源

2009-10-12 14:50:20 Guffa

它不適用於變量高度。 – Rodrigo 2015-11-04 18:26:34

垂直對齊只有在線或inline-block的元素的作品，它只是相對於其他內聯[是 - 塊]元素。因爲你浮動標籤，它會變成塊元素。

您的情況最簡單的解決方案是將標籤設置爲display: inline-block並將vertical-align: middle添加到標籤和輸入。（你可能會發現文本的高度是這樣的，垂直對齊無論如何不會有任何區別。）

來源

2009-10-12 15:40:53 DisgruntledGoat

我遇到了這個問題，試圖在一些垂直無線電盒子上添加標籤。我不得不這樣做：

<%: Html.RadioButton("RadioGroup1", "Yes") %><label style="display:inline-block;padding-top:2px;">Yes</label><br /> 
<%: Html.RadioButton("RadioGroup1", "No") %><label style="display:inline-block;padding-top:3px;">No</label><br /> 
<%: Html.RadioButton("RadioGroup1", "Maybe") %><label style="display:inline-block;padding-top:4px;">Maybe</label><br />

這讓他們能正確顯示，在標籤上的單選按鈕爲中心的，雖然我曾與每行遞增的頂部填充，你可以看到。代碼並不漂亮，但結果是。

來源

2009-12-16 02:57:06

我也有類似的問題，並解決它包裹label成div和設置以下樣式：

<div style="display: table; vertical-align: middle"> 
    <label style="display: table-cell;" ... > ... </label> 
</div>

來源

2013-03-26 11:59:48 Pablo

label { 
 
     padding: 10px 0; 
 
     position: relative; 
 
    }

添加一些填充頂和padding-底部，而不是的高度。

來源

2017-03-19 19:57:54

也許拼出了樣式屬性應該是什麼樣子？也許OP不知道你的意思。 – einpoklum 2017-03-19 20:39:19

在您的標籤上使用CSS。

例如：

label {line-height:1em; margin:2px 5px 3px 5px; padding:2px 5px 3px 5px;}

注意，行高將調整線本身的高度，而餘量將決定多遠其它元件將是拉布勒外部和襯墊將決定任何內部空間從標籤的外邊緣。 margin和padding工作像這樣（順時針方向：右上左下），所以爲2px 5px的3px的5px的是：

2px的頂部 5px的權利 3px的底部 5px的左

來源

2017-04-21 16:44:28 psiclone

-1

添加disply:flex屬性標籤將得到工作完成！

來源

2017-09-02 16:31:20

垂直對齊標籤中的文本

回答

相關問題