Question

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

我试图在文本CSS样式和SVG样式中放置vertical-align而没有任何运气。

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

亲切的问候，的Jesper

<%@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>

Answer 1

尝试使用vertical-align: bottom;代替middle。

将SVG图标和文本居中放在同一个按钮上

1 个答案: