ラベル内のテキストの整列

フォーム内のフィールドのラベルにテキストを垂直に整列するように求められましたが、移動していない理由はわかりません。私は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

'vertical-align'はここで何もしません（IE 8）。 – Joey

私はIE8でそれをテストし、FF（ubuntu）は効果を見るために垂直方向の整列を削除し、完全に動作しています。私はこの例を更新しました。 –

あなたはline-heightを試みたことがありますか？行ラベルが複数ある場合は問題は解決しませんが、簡単な解決策になります。

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

それは非常にうまくスケールしませんが、それは動作します：

出典

2009-10-12 14:40:36 Wabbitseason

ありがとう！それは私の場合に働いた... – jpsstavares

時間の多くを保存しました:) –

これは、私は通常、ラベルの内側に「垂直整列」テキストを何をすべきかです。

出典

2009-10-12 14:48:23 peirix

vertical-alignスタイルは表のセルで使用されるため、ここでは何も行いません。入力ボックスにラベルを位置合わせする

、使用できるline-height：

line-height: 25px;

出典

2009-10-12 14:50:20 Guffa

それは可変な高さのために働きません。 – Rodrigo

垂直配向のみインラインまたはインラインブロック要素で動作し、それが他のインライン[に対してのみ相対です - ブロック]要素。ラベルを浮かせるので、ブロック要素になります。

あなたの場合の最も簡単な解決策は、ラベルを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

私は同様の問題を持っていたし、それがdivにlabelをラッピングし、次のスタイルを設定し解決：

<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; 
 
    }

代わりにいくつかのパディングトップとパディング下を追加します。高さ

出典

2017-03-19 19:57:54

おそらく、スタイル属性がどのように見えるかを覚えていますか？おそらくOPはあなたが何を意味するのか分からない。 – einpoklum

ラベルにcssを使用してください。例えば

：マージンが他の要素がlableおよびパディングの外側であろうどこまでアウト決定するであろう一方、行の高さは、ライン自体の高さを調整すること

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

通知は、任意の内部空間を決定するであろうラベルの外側の端から。このようなマージンとパディングの仕事（時計回り：右上左下）、2ピクセル5pxのように5pxの3pxです：取得しますラベルにdisply:flexプロパティを追加

2ピクセルトップ 5pxの右 3px下 5pxの左

出典

2017-04-21 16:44:28 psiclone

-1

仕事は終わった！

出典

2017-09-02 16:31:20

ラベル内のテキストの整列

答えて

関連する問題