Question

我正在使用JqueryUI。创建了一个对话框。在对话框里面我有一个div。在Div里面我有两个按钮＆＃34;删除＆＃34;和＆＃34;取消＆＃34;。我一直在尝试将按钮插入div的中心。使用DOM资源管理器来查找div的类，并尝试在类中进行更改。但它仍然没有发生。我在下面分享我的代码。

<link href="Themes/jquery-ui.css" rel="stylesheet" type="text/css" />
        $(function () {
            $("#dialog-confirm").dialog({
                resizable: false,
                height: 500,
                width: 500,
                buttons: {
                    "Delete": function () {
                        $(this).dialog("close");
                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                    }
                }
            });
        });
    <div id="dialog-confirm">
    </div>

Answer 1

您可以定位按钮＆＃39; div使用.ui-dialog-buttonset。如果您的页面上有多个对话框，这可能会导致问题，在这种情况下，您必须找到一些方法将类注入其中。

默认情况下，系统会为float: right提供float: none，您希望使用margin: 0 auto来替换.ui-dialog-buttonset{ float: none !important; margin: 0 auto; width: 205px; }，并使用.py来居中它。所以把以下内容放在你的css中：

{{1}}

这里是fiddle，显示它有效。

Answer 2

我使用以下样式来实现按钮的居中：

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {float: none; text-align:center;}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button{margin-left:1em;margin-right:1em;}

如果这对你来说还不够jquery那么你总是可以通过在对话框调用后在javascript中添加这些行来实现：

$(".ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset").css("float", "none").css("text-align", "center");
$(".ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button").css("margin-left", "1em").css("margin-right", "1em");

仅在Firefox中测试...

来源：How to center jquery ui buttons?

在JqueryUI的div中居中按钮

2 个答案: