web-dev-qa-db-ja.com

ラベルを入力フィールドに垂直に揃えたい

これまでの私の仕事は次のとおりです。

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

現在、ラベル（左側）は入力フィールドの上部（右側）に向かっています。入力フィールドの中央にあるため、ラベルを垂直に揃えたいのです。

垂直方向に配置しようとしましたが、機能しません。問題を理解するのを手伝ってください。ありがとう。

htmlcssformsinputlabel
14
James Mitchell

_<span>_をネストすると、多くの不要なマークアップが追加されると感じます。

_display: inline-block_を使用すると、_<label>_と_<input>_を、_float: right_と同じように隣り合わせに配置できますが、ドキュメントの流れは中断されません。さらに、font-size_を変更する場合は、はるかに柔軟であり、ユーザー（またはユーザーのスクリーンリーダー）がアライメントをより細かく制御できます。

編集： 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>_
19
thgaskell

flexbox cssを使用して垂直方向に整列できます。

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

.display-flex {
    display: flex;
    align-items: center;
}
7
Fadi Abo Msalam

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

1
jhunlio

すべての入力タイプで機能するである唯一の方法は次のとおりだと思います。

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>

置いた &nbsp;これは、異なる入力タイプを揃える最も簡単な方法であると思われるためです。ただし、マージンは問題なく機能します。

0
kornieff

<label>要素をスパンで囲み、スパンのvertical-alignをmiddleに設定できます

[〜＃〜] html [〜＃〜]

<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 [〜＃〜]

#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/

0
deadlock