wake-up-neo.net

Ich möchte, dass sich mein Etikett vertikal mit meinem Eingabefeld ausrichtet

Das ist meine bisherige Arbeit:

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

Derzeit befindet sich die Beschriftung (links) im oberen Bereich des Eingabefelds (rechts). Ich möchte sie vertikal so ausrichten, dass sich das Etikett in der Mitte des Eingabefeldes befindet.

Ich habe versucht, vertikal auszurichten und es funktioniert nicht. Bitte helfen Sie mir, das Problem herauszufinden. Vielen Dank.

htmlcssformsinputlabel
14
James Mitchell

Ich fühle mich verschachtelt <span> fügt viele unnötige Markierungen hinzu.

display: inline-block lässt <label> und <input> wie bei float: right nebeneinander sitzen, ohne den Dokumentenfluss zu unterbrechen. Außerdem ist es viel flexibler und ermöglicht eine bessere Kontrolle der Ausrichtung, wenn Sie (oder der Bildschirmleser des Benutzers) den font-size ändern möchten.

Edit: 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

Sie können Flexbox-CSS zum vertikalen Ausrichten verwenden.

Wickeln Sie einfach das übergeordnete Element display-flex.

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

html:

Ich füge dem Label Span hinzu, damit wir einen für das Textlabel spezifischen Stil hinzufügen können:

<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

Ich denke, dass das Folgende die einzige Methode ist, die für alle Eingabetypen funktioniert .

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>

Ich stelle &nbsp; ein, weil dies die einfachste Möglichkeit ist, verschiedene Eingabetypen auszurichten. Die Margen funktionieren jedoch gut.

0
kornieff

Sie können die <label>-Elemente in einen Bereich einschließen und den vertical-align des Spans auf middle setzen.

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