如何在jquery ui按钮中居中ui图标答案

【问题标题】：how to center ui icon in jquery ui button如何在jquery ui按钮中居中ui图标
【发布时间】：2012-01-07 02:54:58
【问题描述】：

我正在寻找一种方法来创建工具栏按钮 uisng jquery ui。

我尝试使用

创建按钮

<div id='menubar_home' style='vertical-align: middle;width: 20px; height: 20px;'>
</div>

并使用

$('#menubar_home').button({
    icons: { primary: "ui-icon-home" }
});

但是按钮中的图片没有居中：

如何在按钮中居中图像？

【问题讨论】：

【解决方案1】：

#menubar_home {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}

【讨论】：

【解决方案2】：

我假设图像中没有透明边。

为img 添加边框以进行定位：border: 1px solid red;

然后检查图像是否具有display: block; 属性。

尝试添加margin: 0 auto; 属性，该属性旨在使块（您的图像）居中。

您可能需要添加 !important 来强制属性：margin: 0 auto !important;

希望对您有所帮助（不确定，不亲自操作代码不容易）。

【讨论】：

【解决方案3】：

将padding:8px; 添加到按钮/输入样式以使图标正确对齐。

【讨论】：

【解决方案4】：

你也可以像这样在 div 中放置一个 span：

<div id="menu-bar-home">
    <span class="ui-icon ui-icon-home"></span>
</div>

在css中引用它并改变位置：

div#menu-bar-home {
    position:relative;
}
div#menu-bar-home > span {
    position: absolute;
    left: +or-(n)px; /* so just adjust the position
}

还请注意，您可能需要调整跨度的 z-index。

祝你好运，兄弟。

编辑：您仍然可以通过这种方式获得您想要的结果，但我认为您正在使用 div 创建按钮。

正如下面这位先生所建议的那样，我会将菜单栏的 css 设置为：

div#menu-bar-home
{
display: table-cell;
vertical-align: middle;
text-align:center;
}

【讨论】：

【解决方案5】：

我最终在 CSS 中执行了以下操作：

#menubar_home {
   font-size: 0; 
   width: 23px; top: 5; 
   height: 23px;
}

【讨论】：