javascript - 在 JqueryUI 的 div 中居中按钮

Question

我正在使用 JqueryUI。创建了一个对话框。在对话框中我有一个 div。在该 Div 中，我有两个按钮“删除”和“取消”。我一直在尝试将按钮置于 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

您可以使用 .ui-dialog-buttonset 定位按钮的 div。如果您的页面上有多个对话框，这可能会导致出现问题，在这种情况下，您必须找到某种方法将类注入(inject)到它们中。

默认情况下，这是给定的 float: right，您需要将其替换为 float: none 您还需要使用宽度和 margin : 0 auto 使其居中。因此，将以下内容放入您的 CSS 中:

.ui-dialog-buttonset{
    float: none !important;
    margin: 0 auto;
    width: 205px;
}

这是 fiddle , 显示它正在工作。