Сжимайте flexbox горизонтально

Question

Я пытался создать пользовательскую кнопку общего доступа (для класса Google), и казалось, что flexbox - лучший способ центрировать текст. Я делаю кнопку поделиться, поэтому у меня есть изображение и текст. Это мой текущий код:

a {
  border-color: green;
  border-style: solid;
  color: white;
  border-radius: 3px;
  text-decoration: none;
  background-color: green;
  font-family: calibri;
  display: flex-shrink;
  justify-content: center;
  align-items: center;
}

img {
  padding: 5px;
  height: 32px;
}

span {
padding: 5px;
}

<a href="https://classroom.google.com/share?url=http://example.com">
  <img src="https://ktibow.github.io/classroom-logo.png"\>
  <span>Share to Classroom</span>
</a>

Предполагается сделать красивую округлую кнопку с Google Classroom lo go слева и текстом справа. Но вместо этого фон кнопки сжимается за пределы изображения.

Я пытался использовать его без flex-shrink. Затем он заполняет всю страницу, что обычно не так, как кнопки общего доступа, даже если он покрывает фон изображения. Я также попытался установить высоту диапазона и размер шрифта тоже. Высота ничего не делает, и если я делаю размер шрифта, то он обрезается. Я тоже попробовал flex-shrink: 0 на картинке. Кто-нибудь знает, как это решить?

Answer 1

Новый дизайн

Я работаю с тегом a display: inline-block

И переместите img в position: absolute

Я думаю, это выглядит лучше сейчас

a {
  text-decoration: none;
  display: inline-block;
  margin: 10px 5px 10px 24px;
  position: relative;
}

img {
  position: absolute;
  border-radius: 50%;
  height: 38px;
  top: -10px;
  left: -18px;

}

span {
  padding: 3px 5px 3px 24px;
  background-color: green;
  border-radius: 3px;
  color: white;
  font-family: calibri;
}

<a href="https://classroom.google.com/share?url=http://example.com">
    <img src="https://ktibow.github.io/classroom-logo.png"\>
    <span>Share to Classroom</span>
</a>

Или, как написал человек с display: inline-flex

a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  margin: 10px 5px 10px 24px;
  background-color: green;
  border-radius: 3px;
  padding: 5px;
}

img {
  height: 38px;
}

span {
  padding: 5px;
  color: white;
  font-family: calibri;
}

<a href="https://classroom.google.com/share?url=http://example.com">
    <img src="https://ktibow.github.io/classroom-logo.png"\>
    <span>Share to Classroom</span>
</a>

Answer 2

a {
  border-color: green;
  border-style: solid;
  color: white;
  border-radius: 15px;
  text-decoration: none;
  background-color: green;
  font-family: calibri;
  display: flex-shrink;
  justify-content: center align-items: center;
 position: absolute;
display: flex;
}

img {
  padding: 10px;
  height:  30px;

}

span {
 margin-top: 15px;
}

Я не знаю, пытаетесь ли вы этого достичь. не лучший способ, хотя