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

图标中心对齐

标签： htmlcssbuttonsvgstyling

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