css - 我如何更改图像并将其居中

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>

你也可以把它放在 flexbox 的任何地方:background: url('cntct.png') 50% 25px no-repeat; 例如: