button is lower than others elements form - html

Question

I just would like to know why my button tag is lower than select tag ?
This is my HTML :
<div class="wrap-form-planning">
<form class="form_search_order form-planning" name="form_search_client">
<!-- Chauffeur -->
<select type="search" name="chauffeur_name[]" class="select-chauffeur selectpicker" multiple size="2">
<option value="" selected>Nom du chauffeur</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<!-- Client -->
<select type="search" name="client_name[]" class="select-client" multiple size="2">
<option value="" selected>Nom du client</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<!-- Semaine -->
<select name="semaine[]" id="semaine" class="select-semaine" multiple size="2">
<option value="" selected>Semaine</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit" class="inp-submit-form-planning"><i class="fa fa-search"></i></button>
</form>
</div>
My CSS :
.wrap-form-planning{
display: block;
background-color: $bleu;
padding: 20px 0;
text-align: center;
}
.form-planning{
width:80%;
max-width: 1080px;
margin: auto;
margin-right: 10px;
select{
font-size: 14px;
margin-right: 10px;
width: (14%-10px);
border-radius: 0;
&.select-chauffeur{
min-width: 150px;
}
&.select-client{
min-width: 120px;
}
&.select-semaine{
min-width: 90px;
margin-right: 0;
}
}
.inp-submit-form-planning{
font-size: 14px;
color: white;
background: $bleu;
border: solid 2px white;
padding: 4px 9px;
&:hover{
color: $bleu;
background: white;
cursor: pointer;
transition: 0.6s;
}
}
}
here is a screen :

Answer 1

They're different sized inline-block elements, so they will aligned baseline by default. You also have a 2px white border on the search icon
You can use form.form_search_order > * { vertical-align: middle; } whatever vertical-align property you want.
But I would use a flex layout. Add display: flex to the form, and use align-items to align them vertically however you want. Also added justify-content: center to horizontally center them since you had text-align: center on the parent originally.
body {
background: blue;
}
.wrap-form-planning {
display: block;
padding: 20px 0;
text-align: center;
}
.form-planning {
width: 80%;
max-width: 1080px;
margin: auto;
margin-right: 10px;
}
.form-planning select {
font-size: 14px;
margin-right: 10px;
width: calc(14% - 10px);
border-radius: 0;
}
.form-planning select.select-chauffeur {
min-width: 150px;
}
.form-planning select.select-client {
min-width: 120px;
}
.form-planning select.select-semaine {
min-width: 90px;
margin-right: 0;
}
.form-planning .inp-submit-form-planning {
font-size: 14px;
color: white;
border: solid 2px white;
padding: 4px 9px;
}
.form-planning .inp-submit-form-planning:hover {
background: white;
cursor: pointer;
transition: 0.6s;
}
form.form_search_order {
display: flex;
align-items: flex-end;
justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="wrap-form-planning">
<form class="form_search_order form-planning" name="form_search_client">
<!-- Chauffeur -->
<select type="search" name="chauffeur_name[]" class="select-chauffeur selectpicker" multiple size="2">
<option value="" selected>Nom du chauffeur</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<!-- Client -->
<select type="search" name="client_name[]" class="select-client" multiple size="2">
<option value="" selected>Nom du client</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<!-- Semaine -->
<select name="semaine[]" id="semaine" class="select-semaine" multiple size="2">
<option value="" selected>Semaine</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<button type="submit" class="inp-submit-form-planning"><i class="fa fa-search"></i></button>
</form>
</div>