Текст не центрируется после добавления изображения на кнопку с помощью :: 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>

Answer 1

Я всегда предпочитаю использовать абсолютное позиционирование вместо плавающего.Он более стабилен и прост для понимания.

.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;
    position: relative;
}
.btn1::before {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 10px;
    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;
    height: 30px;
}

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

Answer 2

.container{
    text-align:center;
}
.btn{
    width:200px;
    height:55px;
    /*width:195px;
    height:50px;*/
    border-radius: 3px;
    font-size: 16px;
}
.btn1{
    display: flex;
    justify-content: center;
    align-items: center;
    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>

Answer 3

Можете ли вы попробовать это

.btn1 {
  display: flex;
  align-items: center;
  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;
}

Просто замените стиль для .btn1 и .btn1::before

Answer 4

вы можете использовать flex с расположением по центру, попробуйте

.btn1 {
    display: flex;
    justify-content: center;
    align-items: center;
}