将svg居中对齐具有灰色背景的按钮

Question

我有一个按钮，该按钮的图像要与中心对齐。我希望按钮具有灰色背景。

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;
}

icon_center_aligned

Answer 1

您不需要内嵌图像，而需要将背景应用于按钮元素。

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" />