web-dev-qa-db-fra.com

Je veux que mon étiquette s'aligne verticalement avec mon champ d'entrée

Voici ce que mon travail est jusqu'ici:

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

Actuellement, l'étiquette (à gauche) est en quelque sorte orientée vers le haut du champ de saisie (à droite). Je veux les aligner verticalement de sorte que l'étiquette soit au milieu du champ de saisie.

J'ai essayé vertical-align et ça ne marche pas. S'il vous plaît, aidez-moi à essayer de résoudre le problème. Merci.

htmlcssformsinputlabel
14
James Mitchell

Je pense que imbriquer <span> ajoute beaucoup de balises inutiles.

display: inline-block permet de placer les <label> et <input> l'un à côté de l'autre, tout comme avec float: right mais sans interrompre le flux de documents. De plus, il est beaucoup plus flexible et permet un meilleur contrôle de l'alignement si vous (ou le lecteur d'écran de l'utilisateur) souhaitez modifier le font-size.

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

Vous pouvez utiliser flexbox css pour aligner verticalement.

Il suffit d’envelopper l’élément parent display-flex.

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

html:

J'ajoute span dans votre étiquette pour que nous puissions ajouter un style spécifique à l'étiquette de texte:

<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

Je pense que la suivante est la seule méthode qui fonctionne pour tous les types d’entrée.

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>

Je mets &nbsp; parce que cela semble être le moyen le plus simple d’aligner différents types d’entrée; Cependant, les marges fonctionnent très bien.

0
kornieff

Vous pouvez inclure les éléments <label> dans une étendue et définir le 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