Как я могу изменить изображение и отцентрировать его

Question

как я могу изменить изображение и отцентрировать его по отношению к flexbox?

Я пытался добавить ширину и высоту, но странным образом двигался и не видел png. Я также забочусь об отзывчивом Спасибо за вашу помощь

CSS-код

.container{
    width: 100%;
    height: 50vh;
    border-top: 4px solid rgb(134, 17, 212);
    display: flex;
    justify-content: space-evenly;
    padding-top: 15px;
    background: rgb(20, 20, 19);
}

.contact, .projects, .me{
    background: rgb(20, 20, 19);
    width: 100%;
    display: flex;
    color: white;
    justify-content: space-evenly;
    font-size: 1.3em;
}

.contact {
    background: url('cntct.png') top center no-repeat;
    width:
}

HTML-код

  <div class="container">
        <div class="contact">Kontakt</div>
        <div class="projects">Projekty</div>
        <div class="me">O mnie</div>
    </div>

</div>

Answer 1

Можете ли вы добавить изображение того, как вы хотите, чтобы оно выглядело?Без этого я могу предложить добавить background-size: 50px, auto, contain; для определения размера фонового изображения.Вот пример использования контактного изображения:

  .container{
        width: 100%;
        height: 50vh;
        border-top: 4px solid rgb(134, 17, 212);
        display: flex;
        justify-content: space-evenly;
        padding-top: 15px;
        background: rgb(20, 20, 19);
    }
    
    .contact, .projects, .me{
        background: rgb(20, 20, 19);
        width: 100%;
        display: flex;
        color: white;
        justify-content: space-evenly;
        font-size: 1.3em;
    }
    
    .contact {
        background: url('https://cdn.pixabay.com/photo/2016/06/13/17/30/mail-1454732_960_720.png') top center no-repeat;
        background-size: 50px, auto, contain;
        
    }

      <div class="container">
            <div class="contact">Kontakt</div>
            <div class="projects">Projekty</div>
            <div class="me">O mnie</div>
        </div>

    </div>

Вы также можете разместить его в любом месте флексбокса: background: url('cntct.png') 50% 25px no-repeat;, например: