gpt4 book ai didi

css - 将 SVG 图标和文本置于同一个按钮的中心

转载 作者:太空宇宙 更新时间:2023-11-04 12:21:57 24 4
gpt4 key购买 nike

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

我尝试在文本 CSS 样式和 SVG 样式中都使用垂直对齐,但没有成功。

在下面发布了我的代码,这里是我的测试网站的链接: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>

最佳答案

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

关于css - 将 SVG 图标和文本置于同一个按钮的中心,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28303325/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com