使用:: before在按钮上添加图像后，文本未居中

Question

按钮上的文字位于中间，当我使用添加图像时::before，文字稍微抬高，而按钮则稍稍向下移动，我如何将文字居中

.container{

    text-align:center;

}

.btn{

    width:200px;

    height:55px;

    /*width:195px;

    height:50px;*/

    border-radius: 3px;

    font-size: 16px;

}

.btn1{

    border: #00baaf;

    background: #00baaf;

    color: white;

    margin:10px;

}

.btn1::before {

    content: "";

    background: url("https://cdn3.iconfinder.com/data/icons/popular-services-brands-vol-2/512/discord-512.png") no-repeat;

    background-size: contain;

    width: 40px;

    margin-left: 5px;

    height: 30px;

    float: left;

}

<div class="container">

    <button class="btn btn1">Add to server</button>