在同一个按钮上居中 SVG 图标和文本答案

【问题标题】：Centering SVG icon and text on the same button在同一个按钮上居中 SVG 图标和文本
【发布时间】：2015-04-02 21:49:25
【问题描述】：

我无法将 SVG 图标和文本垂直居中在同一个按钮上。我做错了什么？

我尝试在文本 CSS 样式和 SVG 样式中都添加垂直对齐，但没有任何运气。

在下面发布了我的代码，这是我的 test.site 的链接：www.e-kl.dk/test5.asp

亲切的问候，杰斯珀

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<link href="_socialicons.css" rel="stylesheet" type="text/css" />

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>

<style type="text/css">
<!--
.btn_delete {
  border: 1px solid #ccc;;
  border-radius: 4px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
  color:#666;
  font-size: 12px;
  background: #ccc;
  padding: 2px 10px 2px 10px;
  text-decoration: none;
}
.btn_delete:hover {
  border: 1px solid #333;
  background:#D0232A;
  text-decoration: none;
}
.btn_delete:before {
    background: url("s/images/delete.svg") no-repeat scroll center center / 100% auto rgba(0, 0, 0, 0);
    content: "";
    display: inline-block;
    color: #ffffff;
    height: 16px;
    position: relative;
    width: 16px;
    margin: 0px 10px 0px 0px;
  vertical-align:middle;
}

-->
</style>
<body>
<table width="100%" border="0" class="tabelform">
  <tr>
    <td width="100%"><a href="xxx.asp">
        <button class="btn_delete">DELETE</button>
      </a></td>
  </tr>
</table>
</body>
</html>

【问题讨论】：

标签： css button svg

【解决方案1】：

尝试vertical-align: bottom; 而不是middle。

【讨论】：

你用什么浏览器？它在 Chrome 和 FF 中都适用于我，所以我们清楚：你是否在 :before 上改变了当前的垂直光？
使用 safari - 将其更改为底部并将高度设置为 14px，现在看起来还可以 - thx