css - Primefaces 对话框总是出现在左下角

Question

我在我的 JSF 元素中创建了一个 primeface 对话框。它有以下代码:

<p:dialog id="abc" modal="true" position="center" 
styleClass="pdialog-gen pdialog-gen-height-ext" style="left: 340px !important;"
 draggable="false" closable="true" appendTo="@(body)" dynamic="true"
        resizable="false" widgetVar="ab">

它总是出现在左下角。虽然我想让它出现在中心。即使我使用了位置属性，它仍然出现在左下角。你能对此提出建议吗？

Edit1:当我右键单击网页并执行“检查元素”以查看代码，例如它如何在相应的 html 中呈现时，我看到以下代码:

    <div id="abc" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-shadow pdialog-gen pdialog-gen-height-ext ui-overlay-visible" 
    style="width: auto; height: auto; left: 0px; top: 341.5px; 
visibility: visible; z-index: 1002;"
     role="dialog" aria-labelledby="abc_title" aria-hidden="false" aria-live="polite">

我不知道它从哪里选择内联样式。有人可以对此提出建议吗？

编辑-2我知道了解决方案。我为#abc 写了一个 CSS 样式，我在其中定义了 left:240px;解决了我的问题。线程关闭。谢谢大家。

Answer 1

您可能想要删除 left: 340px !important;

并应用其容器 margin: 0 auto; 这将使它居中