Как верстать кнопки с svg иконками (html структура внутри)?

Question

[larka_skaz]

<button class="button-menu">

<span class="menu-icon">
<svg width="40" height="40" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="28" height="28" rx="14" fill="#7B82EC"/>
<rect x="7" y="8" width="14" height="2" rx="1" fill="white"/>
<rect x="7" y="18" width="14" height="2" rx="1" fill="white"/>
<rect x="7" y="13" width="14" height="2" rx="1" fill="white"/></svg>
</span>
<span class="button-libel">Все разделы
</span>
</button>

Основная проблема с выравниванием иконки и текста кнопки по центру. Надо чтобы кнопка корректно выглядела во всех популярных браузерах.
Особенно интересны css свойства display, position.

Я начала делать, но у меня не получается согласовать изображение и надпись. И, да, финальный размер кнопки должен быть 40 пикселей в высоту.
https://jsfiddle.net/LaraSka/h85zt1xu/

Answer 1

[Ilnur Davletbaev]

Смотреть в сторону flex:
.button-menu {
...
display: flex;
align-items:center;
}

Comments

[larka_skaz]

Ilnur Davletbaev, спасибо. реально все работает. Не будет ли проблем в браузерах которые не особо дружат с флексом ?

[Ilnur Davletbaev]

С IE будут. Под него надо "display: -ms-flexbox;" добавить, если не ошибаюсь

Answer 2

[Anton fon Faust]

я бы вынес svg в фон before и дальше position: absolute использовал для позиционирования иконки относительно текста в кнопке. А текст выровнял по высоте с помощью line-height

Answer 3

[BigSmoke]

Я вам в предыдущем вопросе написал решение. Используйте align-items center и все у вас будет по центру.

Comments

[larka_skaz]

BigSmoke, спасибо, с первого раза не поняла. Все работает!Матерь божья, весь день коту под хвост. Спасибо, реально работает.Скажите а мазила и другие браузеры не будут выеживаться из-за в флекса в данном случае ?

[BigSmoke]

larka_skaz, Не будут. Флексы уже можно спокойно использовать.

Answer 4

[Михаил]

Вот это работает!!!

<button class="button-menu">
  <span class="menu-icon">
    <svg width="40" height="40" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect width="28" height="28" rx="14" fill="#7B82EC"/>
      <rect x="7" y="8" width="14" height="2" rx="1" fill="white"/>
      <rect x="7" y="18" width="14" height="2" rx="1" fill="white"/>
      <rect x="7" y="13" width="14" height="2" rx="1" fill="white"/>
    </svg>
  </span>
  <span class="button-label">Все разделы</span>
</button>
<style type="text/css">
 .button-menu {
   display:flex;
   padding:0;
   margin:0;
   border:0;
   border-radius:40px;
   background-color:#7b82ec;
   overflow:hidden;
 }
 .button-label {
   line-height:40px;
   text-transform:uppercase;
   color:white;
   margin:0 5px;
   font-size:20px;
 }
</style>