如何更改图像并居中

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;：