JQuery输出与静态示例不同

我使用下面jquery输出的纯html创建了一个按钮。静态html是：

<a id="button1" title="Reset" style="padding: .5em .5em .5em .5em;" 
class="ctkit-button-light-gray 
       ctkit-button-rounded-light-gray 
       ctkit-button-enabled-light-gray">

    <div style="display: table; width: 100%;">

        <div style="display: table-cell; text-align: center;vertical-align: middle;">
            <img src="/Images/reset.png" title="Reset" style="border: 0px; width: 1.5em; height: 1.5em;">
        </div>

        <div style="display: table-cell; text-align: center; vertical-align: middle;">
            <span style="padding-left: 2px;"> Reset</span>
        </div>
    </div>
</a>

请注意，图像和文本是垂直对齐的

现在，当我使用jquery使用以下代码创建按钮时：

var settings = $(this).data('ctkit-button').data;


var id = $(this)[0].id;
var style = '';


var css = 'ctkit-button-' + settings.theme + ' ';
if(settings.rounded)
    css += 'ctkit-button-rounded-' + settings.theme + ' ';
else
    css += 'ctkit-button-normal-' + settings.theme + ' ';

if(settings.enabled)
    css += 'ctkit-button-enabled-' + settings.theme + ' ';
else
    css += 'ctkit-button-disabled-' + settings.theme + ' ';
var div1 = $('<div />',
{
}).attr('style', 'display: table; width: 100%; ');

var div2 = $('<div />',
{
}).attr('style', 'display: table-cell; text-align: center; vertical-align: middle; ');

style = 'border: 0px;';

if(settings.width.length > 0)
    style += 'width: ' + settings.width + '; ';
if(settings.height.length > 0)
    style += 'height: ' + settings.height + ';' ;

var img = $('<img />',
{
    src : settings.image
}).prop('title', settings.tooltip).attr('style', style); // 'border: 0px');

$(div1).append($(div2).append(img));

var div3 = $('<div />',
{
}).attr('style', 'display: table-cell; text-align: center; vertical-align: middle; ');

var span = $('<span />',
{
}).attr('style', 'padding-left: 2px;').html(settings.text);

$(div1).append($(div3).append(span));
$(this).append(div1);



$(this).prop('title', settings.tooltip);
$(this).attr('style', settings.padding);
$(this).addClass(css);

我的按钮未垂直对齐且较大：

我上面的静态代码取自jquery按钮控件，我使用以下方法获得html： var html=$（'html'）.html（）； 在它被创建之后，仅仅创建一个静态html文件来查看它的外观和正确性

---

因此，我对正在发生的事情和解决方法感到困惑。

我看到您正在使用jQuery定义HTML元素，如下所示：

var div1 = $("<div />", {}).attr(...);

var div1=$（“”，{}）.attr（…）；

作为一个有用的提示，您可以在这些大括号中定义各种属性，因此实际上不需要链接.attr（）方法

var div1=var div1=$（“”，
{'style'：'显示：表格；宽度：100%；'}
);

其次，img标记似乎是问题所在……文本看起来居中，但图像看起来略高于中心。尝试直接在图像标记的样式中添加垂直对齐：中间属性

var img = $('<img />', {
    'src' : settings.image,
    'title': settings.tooltip,
    'style': 'vertical-align: middle; ' //add your other rules as well.
});

var img=$（'
下面是一篇关于使用display:table和vertical align的相关文章


祝你好运，friendo。
我不太喜欢创建这么多动态HTML…为什么不直接用jQuery而不是Javascript来添加这个类？（例如，
$（this.addClass（'whatever'）；
我确实使用addClass，代码一直在底部$（this.addClass（css）；哦，很抱歉。甚至没有滚动。我的坏：-）我可以通过在样式中添加以下内容来修复它：页边空白底部：-.3em；这似乎已经修复了它。但我想看看是否还有我遗漏的东西可以向我指出：D
var div1 = $("<div />", {}).attr(...);

var div1 = var div1 = $('<div />', 
    {'style': 'display: table; width: 100%; '}
);

var img = $('<img />', {
    'src' : settings.image,
    'title': settings.tooltip,
    'style': 'vertical-align: middle; ' //add your other rules as well.
});