私はここに私の入力フィールド

Question

垂直に整列するために、私のラベルは、私の仕事は今のところは何かということですウォント：上

http://jsfiddle.net/2RCBQ/

<div id="main"> 
<form> 
    <label>First Name:<input type="text" id="firstname"></label><br/> 
    <label>Last Name:<input type="text" id="lastname"></label><br> 
    <label>E-Mail:<input type="text" id="email"></label><br/> 
    <label>Phone:<input type="text" id="phone"></label><br/> 
</form> 
</div> 

CSS

#main { 
    width:300px; 

} 

#main input { 
    float:right; 
    display:inline; 
} 

#main label { 
    color: #2D2D2D; 
    font-size: 15px; 
    width:250px; 
    display: block; 
} 

現在、ラベルを（左）は、入力フィールドの一番上に向かっています（右）。私は、入力フィールドの途中からラベルを垂直に整列させたい。

私は垂直整列を試みましたが動作しません。問題を理解するのを手伝ってください。ありがとう。

Answer 1

あなたは

<div id="main"> 
    <form> <span><label>First Name:<input type="text" id="firstname" /></label></span> 
     <br/> <span><label>Last Name:<input type="text" id="lastname" /></label></span> 
     <br/> <span><label>E-Mail:<input type="text" id="email" /></label></span> 
     <br/> <span><label>Phone:<input type="text" id="phone" /></label></span> 
     <br/> 
    </form> 
</div> 

---

CSSスパンのvertical-align

middleにHTMLスパンで<label>要素を囲み、設定することができます

#main { 
    width:300px; 
} 
#main input { 
    float:right; 
    display:inline; 
} 
#main label { 
    color: #2D2D2D; 
    font-size: 15px; 
} 
#main span { 
    display: table-cell; 
    vertical-align: middle; 
    width:250px; 
} 

---

http://jsfiddle.net/2RCBQ/2/

Answer 2

HTML：

私は、我々はテキストラベルのための特定のスタイルを追加することができ、あなたのラベルにスパンを追加します。

<div id="main"> 
    <form> 
     <label><span>First Name:</span><input type="text" id="firstname"></label><br/> 
     <label><span>Last Name:</span><input type="text" id="lastname"></label><br> 
     <label><span>E-Mail:</span><input type="text" id="email"></label><br/> 
     <label><span>Phone:</span><input type="text" id="phone"></label><br/> 
    </form> 
</div> 

はCSS：

#main label span { 
    position:relative; 
    top:2px; 
} 

demo

Answer 3

入れ子に感じる<span>は、多くの不要なマークアップを追加します。

display: inline-block と同じように、<label>と<input>は隣り合っていますが、ドキュメントの流れは壊れません。さらに柔軟性があり、ユーザー（またはユーザーのスクリーンリーダー）がfont-sizeを変更したい場合、調整をより詳細に制御できます。

編集：あなたは垂直整列するフレキシボックスのCSSを使用することができますjsfiddle

label, input { 
 
    display: inline-block; 
 
    vertical-align: baseline; 
 
    width: 125px; 
 
} 
 

 
label { 
 
    color: #2D2D2D; 
 
    font-size: 15px; 
 
} 
 

 
form, input { 
 
    box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
} 
 

 
form { 
 
    width: 300px; 
 
}

<form> 
 
    <label for="firstname">First Name:</label><input type="text" id="firstname"> 
 
    <label for="lastname">Last Name:</label><input type="text" id="lastname"> 
 
    <label for="email">E-Mail:</label><input type="text" id="email"> 
 
    <label for="phone">Phone:</label><input type="text" id="phone"> 
 
</form>

Answer 4

。

親要素display-flexをラップするだけです。

.display-flex { 
    display: flex; 
    align-items: center; 
} 

Answer 5

私は、次はそのすべての入力タイプため作品唯一の方法だと思います。

label { display: flex; align-items: center; } 
 
input { margin: 0; padding: 0; }

<label><input type="checkbox">&nbsp; HTML</label> 
 
<label><input type="radio">&nbsp; JS</label> 
 
<label>CSS &nbsp;<input type="text"></label> 
 
<label>Framework &nbsp; 
 
    <select><option selected>none</option></select> 
 
</label>

異なる入力タイプを揃えるための最も簡単な方法のようですので、私は を置きます。しかし、マージンは正常に動作します。