vertical align select & div

by ben74

HTML

<article class="tb30 r10 filtre">
    <i>Filtrer par :</i>
    <select><option>Valeur +/- </option></select>
    <a class="icongrid"></a>
    <a class="iconlist"></a>
    <select><option> --- Catégories --- </option></select>
    <a id="prev"></a>
    <input value="1/11">
    <a id="next"></a>
</article>

CSS

.filtre {
    display: block;
    vertical-align:middle;line-height:300px;/*nécessaire au vertical-align*/
    font-size: 2rem;
    height:300px;    
    margin: 24px auto 0;
    max-width: 960px;
    padding: 10px;
    width: 100%;
}


.filtre input, .filtre select {
    display: inline-block;
    height: 50px;
    line-height: 50px;
    margin: 0;
    width: 150px;
}
.filtre input, .filtre select {
    color: #999999;
    font-size: 2rem;
    font-style: italic;
}
.filtre input, .filtre select, .filtre button {
    border-radius: 5px;
    vertical-align: middle;
}
select, option, button {
    cursor: pointer;
}

.filtre *{    vertical-align:middle;}

.r10 {
    border: 2px solid #000;
    border-radius: 5px;
}


.filtre a {
    background: url("https://www.gravatar.com/avatar/a8241c4c6ea1b340feb45b143aa269a8?s=32&d=identicon&r=PG") no-repeat scroll 50% 50% rgba(0, 0, 0, 0);
}
.filtre #prev, .filtre #next, .filtre .icongrid, .filtre .iconlist {
    background-size: cover !important;
    display: inline-block;
    font-size: 2rem;
    height: 50px;
    margin: 0;
    width: 50px;
}
a {
}