CODEWITHSUNDEEP
cssbuttonsvg
Jesper Kindt Larsen
Jesper Kindt Larsen

Reputation: 107

Centering SVG icon and text on the same button

I cannot center my SVG icon and my text vertically on the same button. What am I doing wrong?

I tried to put vertical-align in both the text CSS style and in the SVG style without any luck.

Posted my code below and here is a link to my test.site: www.e-kl.dk/test5.asp

Kind regards, 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>

Upvotes: 0

Views: 3487

Answers (1)

user4338202
user4338202

Reputation:

Try vertical-align: bottom; instead of middle.

Upvotes: 1

Related Questions