Reputation: 63
How can I align vertically a label and an input when the label take two lines ?
Here is my code:
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="passwd_confirm">Confirmation du mot de passe:</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="passwd_confirm" maxlength="32">
</div>
</div>
<form>
The default display is that the input and the first line of the label have the same baseline but I want to align the input with the vertical center of the label.
How can I do this ?
Thanks.
Upvotes: 1
Views: 1777
Reputation: 53684
If you're using bootstrap3, you could add a class to the parent that makes it a flex
row, then use align-items: center
to center vertically. You might also want to match the default padding-top: 7px
value for the .control-label
element by either removing that padding, or adding that to the right column/input as a padding or margin, depending on the rest of your layout.
.form-group.valign {
display: flex;
align-items: center;
}
@media (min-width: 768px) {
.valign input {
margin-top: 7px;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-horizontal">
<div class="form-group valign">
<label class="control-label col-sm-3" for="passwd_confirm">Confirmation du mot<br> de passe:</label>
<div class="col-sm-9">
<input type="password" class="form-control" id="passwd_confirm" maxlength="32">
</div>
</div>
<form>
Upvotes: 2