CSS垂直整列中間

親要素の中央にあるSPAN要素を垂直方向に整列しようとしています。CSS垂直整列中間

enter image description here

を私は縦に入力ボックスで（真ん中）を整列させるためのユーザ名とパスワードのラベルの両方を取得しようとしています：

これは私がやっているものです。

これは私のHTMLコードです：

<div class="login_field_wrap"> 
    <span>Username</span> 
    <input type="text" autocomplete="off" spellcheck="off" id="username" name="username"> 
    <div class="clear"></div> 
</div>

これは私がしようとしたものです：垂直このラッピングDIVの内部の画像要素を揃える

.clear { clear:both; } 
.login_field_wrap span { 
float:left; vertical-align:middle; font-size:13px; color:#333; font-weight:bold; } 
.login_field_wrap input { 
float:right; vertical-align:middle; padding:8px 5px; border:solid 1px #AAA; 
margin:0px; width:250px; }

はとにかくうまくChromeで、絶対に正常に動作し、それだけで私のスパンと一致しません！

何か助けが素晴らしいだろう。

出典

2012-03-28 TheCarver

一般的な「」ではなく、ユーザーに喜んでください。フォームコントロールに明示的に関連付けられたラベルを使用してください： 'ユーザー名'。 – steveax

@steveax：サイズが小さいため、常にチェックボックスとラジオボタンにラベルを使用します。ラベルを使用すると明らかにクリック可能な領域が増えて使いやすくなりますが、実際には250px x 30pxのテキストボックスにラベルを付ける必要がありますか？自分自身でインターネットを閲覧するときに、テキストボックスのラベルをクリックしたことがありません。なぜ私がラベルを使用する必要がある別の理由はありますか？ – TheCarver

ヒット領域を増やすことは、ラベルを使用することの1つのメリットに過ぎません。もう1つの重要な理由は、スクリーンリーダーのユーザーにとってです。明示的にラベルをフォームコントロールに関連付けることにより、フォームコントロールがフォーカスされているときにスクリーンリーダーがラベルを正しく読み取るようになります。 – steveax

CSSを使用した縦方向の整列は難しいかもしれません。また、CSS3はこれをサポートするために多大な努力をしていますが、現在のブラウザ市場ではCSS3のサポートは不十分です。

この効果を達成するために、子要素のプロパティを、その要素を含む高さに等しく設定します。

は例えば、私は次のCSSを使用します。テキストは、二行目にオーバーフローした場合には、あなたのデザインが、本質的に破壊される場合

.login_field_wrap { height:30px; /* or whatever is appropriate for your design */ 
.login_field_wrap span { height:30px; line-height:30px; } 
.login_field_wrap input { height:30px; line-height:30px; }

垂直なものを揃えるにline-heightを使用しての唯一の欠点があります。

出典

2012-03-28 23:13:53 Moses

これはうまくいきますが、親要素がサイズを動的に変更した場合、アライメントが崩れてしまう（または少なくとも、あらかじめ定義された 'line-height：30px'以内に留まることを）知っておくべきです。変更された場合は、表の表示方法の使用を検討する必要があります。いずれにしても、関連するインライン要素を垂直に整列させるためのより良い方法が必要です。素晴らしい答え@モーゼス。 –

vertical-alignは<td>以外では動作しませんでした。
回避策一般的には、.login_field_wrapの高さを定義し、<スパン>のline-heightプロパティを.login_field_wrapの高さに設定します。

出典

2012-03-28 23:12:32 Paul

トリッキー、ハァッ！私はイメージ要素をラップDIVの中で垂直方向に（中央に）整列させることができましたが、スパンではできません！ – TheCarver

-3

私はtext-align：center;と思います。要素にも作用するはずです。私が間違っていないと、それは通常、テキストではなくても機能します。

出典

2012-03-28 23:32:16 corvid

テキストを中央に配置すると、テキストと一部の要素が整列します。私は質問のタイトルが言っているように、真ん中に設定された垂直方向の配置を探しています。関係なく、努力をしていただきありがとうございます。 – TheCarver

ちょうどあなたのスパンクラスからfloatプロパティを削除し、display:inline-blockに設定し、vertical-align:middleプロパティが動作しますので、同じよう：

.login_field_wrap span { 
    color: #333333; 
    display: inline-block; 
    font-size: 13px; 
    font-weight: bold; 
    text-align: left; 
    vertical-align: middle; 
}

編集：あなたのコードビットをクリーンアップ、ここでそのはずのデモがありますブラウザ間で作業します。 http://jsfiddle.net/kUe3Y/

出典

2012-03-28 23:46:44

これは私の雌犬にも役立ちました。ありがとう。 –

私は、これは、垂直アンカー要素を整列するために取得することができたこれを行う最も簡単な方法は、table-cell

#parent{ 
    display:table; 
} 

#child{ 
    display:table-cell; 
    vertical-align:middle; 
}

にtableに親コンテナ表示プロパティと子表示プロパティを設定することです発見divの中に

私はこれをjsFiddleの質問に入れました。

出典

2014-01-02 15:22:41

答えて

関連する問題