Центр выровнять SVG к кнопке с серым фоном - PullRequest
Новая
       10

Центр выровнять SVG к кнопке с серым фоном

0 голосов
/ 23 февраля 2019

У меня есть кнопка с изображением, которое я хочу выровнять по центру.Я хочу, чтобы кнопка имела серый фон.

HTML: 

 <button type="submit" data-target="#modal">
            <img className="rainbow" role="presentation" />
 </button>

CSS: 

.rainbow {
  background: url("/static/icons/arrow.svg") no- repeat center;
  border: none;
  cursor:pointer;
  overflow: hidden;
  outline:none;
  height: 53px; 
  width: 50px;  
  background-color: $welcome-gray-1;
}

final_image_button

icon_center_aligned

1 Ответ

0 голосов
/ 23 февраля 2019

Вам не нужно иметь встроенное изображение, и вам нужно применить фон к элементу кнопки. 

button {
  background: #000 url("/static/icons/arrow.svg") no-repeat center;
  border: none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  height: 53px;
  width: 50px;
}
<button type="submit" data-target="#modal" />
...