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