Центрирование значка SVG и текста на той же кнопке

Я не могу центрировать значок SVG и текст по вертикали на той же кнопке. Что я делаю не так?Центрирование значка SVG и текста на той же кнопке

Я попытался установить вертикальное выравнивание как в текстовом стиле CSS, так и в стиле SVG без везения.

Добавлено мой код ниже, а вот ссылка на мой 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>

источник

2015-02-03 Jesper Kindt Larsen

Попробуйте vertical-align: bottom; вместо middle.

источник

2015-02-03 16:08:43

не работал ... –

Какой браузер вы используете? Он работает для меня как в Chrome, так и в FF, поэтому мы очищаем: вы изменили текущий вертикальный заголовок: раньше? –

с использованием сафари - изменил его на дно и установил высоту 14px, и теперь он выглядит нормально - thx –

Центрирование значка SVG и текста на той же кнопке

ответ

Смежные вопросы