Wyśrodkowanie w pionie flex

Question

Próbowałem wielu rzeczy jednak nie mogę wyśrodkować elementów w moim navbarze w pionie jednocześnie używając display: flex...

 

        <div className={styles.NavBar}>
            <img src={Logo} alt="Logo" width="80vw" height="80vh"/>
            <select className={styles.NavBarSelectBox}>
                <option selected value="torun">Toruń</option>
                <option value="bydgoszcz">Bydgoszcz</option>
            </select>
            <DropMenuFilters />
            <img src={Info} alt="info image" width="50vw" height="50vh"/>
        </div>

.NavBar{
    padding: 0 15px;
    background-color: #6189f7;
    margin: 0px;
    box-sizing: border-box;
    height: 10vh;
    text-align: left;
    display: flex;
    line-height: 10vh;
}

.NavBarSelectBox {
    width: 77vw;
    height: 5vh;
    border-radius: 15px;
    padding: 0px 0px 0px 10px;
    margin: 0px 3vw 0px 5vw;
}

.NavBarFilters {
    cursor: pointer;
}

Komponent DropMenuFilters otoczyłem znacznikiem <span>. Jestem też ciekaw czy da się zrobić tak, aby przy zmniejszaniu roździelczości strony zmniejszała się szerokość tylko pola select.

Answer 1

.NavBar {
  align-items: center;
}

img {
  display: block;
}

 

Comments

Zadziałało :) dzięki