javascript - 如何使用 css 将两个 primefaces 按钮居中？

Question

我需要做的是将两个按钮垂直居中。我尝试使用 margin-left:auto; 添加 div-container; margin-right:auto 但它不起作用。此外，当滚动页面时，这些按钮会上下移动，以便始终可见。

我现在拥有的是:

    <h:outputScript>
        var buttons_div = document.getElementById("search-and-clear-btns");
        var b_search = document.getElementById("search");
        var b_clear = document.getElementById("clear");
        var vertical_position = 0;
        if (pageYOffset) { //usual
            vertical_position = pageYOffset;
        }
        else if (document.documentElement.clientHeight)//ie
            vertical_position = document.documentElement.scrollTop;
        else if (document.body)//ie quirks
            vertical_position = document.body.scrollTop;
        b_search.style.top = vertical_position + Math.round(0.85 * window.innerHeight);
        b_clear.style.top = vertical_position + Math.round(0.85 * window.innerHeight);

        function updateButtonsTop() {
            if (pageYOffset) { //usual
                vertical_position = pageYOffset;
            }
            else if (document.documentElement.clientHeight)//ie
                vertical_position = document.documentElement.scrollTop;
            else if (document.body)//ie quirks
                vertical_position = document.body.scrollTop;

            if (buttons_div.offsetTop > 0.85 * window.innerHeight) {
                if (buttons_div.offsetTop >= b_search.offsetTop) {
                    if ( buttons_div.offsetTop >= (vertical_position + Math.round(0.85 * window.innerHeight)) ) {
                        b_search.style.top = vertical_position + Math.round(0.85 * window.innerHeight);
                        b_clear.style.top = vertical_position + Math.round(0.85 * window.innerHeight);
                    } else {
                        b_search.style.top = buttons_div.offsetTop;
                        b_clear.style.top = buttons_div.offsetTop;
                    }
                }
            }
            if( b_search.style.top > buttons_div.offsetTop ) {
                b_search.style.top = buttons_div.offsetTop;
                b_clear.style.top = buttons_div.offsetTop;
            }
        };

        document.addEventListener("wheel", updateButtonsTop);
        document.addEventListener("scroll", updateButtonsTop);
    </h:outputScript>

        

.clear { 
  clear: both; 
  float: none; 
  font-size: 0px; 
  height: 0px; 
  background: none; 
  padding: 0!important; 
}

.center { 
  text-align: center; 
}

.ui-button { 
  vertical-align: top; 
  border: medium none; 
}

    <div class="clear"></div>
  <div id="search-and-clear-btns" class="center" style="display: inline-block">
    <p:button id="search" value="Search" title="Search" href="#search" style="position: absolute;"/>
    <p:button id="clear" styleClass="button-second" value="Clear" href="#clear" title="Clear" style="margin-left: 201px; position: absolute;"/>
  </div>

在我的页面上，它正好位于左侧。

解决者:

添加js脚本:

        b_search.style.left = Math.round(window.innerWidth / 2) - Math.round((2*b_search.offsetWidth+40)/2);
        b_clear.style.left = Math.round(window.innerWidth / 2) - Math.round((2*b_clear.offsetWidth+40)/2);

我在第二个Math.round中添加的40是按钮之间的空间。

Answer 1

要使用边距自动居中，元素必须是相对位置的。为了解决你的代码，你有内联 block ，所以不适合整个水平页面。您更改为阻止并且有效。

 .center {
     display: block;
     text-align : center;
  }

按钮是绝对定位的，另一个错误。你想用它做什么？

  <p:button id="search" value="Search" title="Search" href="#search"/>

祝你好运