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

Question

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

我尝试使用

创建按钮

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

并使用

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

但按钮中的图像不居中：

如何将图像置于按钮中心？

Answer 1

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

Answer 2

我认为图像中没有透明的边。

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

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

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

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

希望能帮到你（不确定，如果不自己操纵代码就不容易）。

Answer 3

在按钮/输入样式中添加padding:8px;以允许图标正确对齐。

Answer 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;
}

Answer 5

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

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