Question

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

目前我所拥有的是：

    <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中添加的是按钮之间的空格。

Answer 1

要以边距自动为中心，元素必须相对位置。为了解决你的代码，你有内联块，所以不适合整个水平页面。你改成阻止它就可以了。

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

按钮是绝对定位，另一个错误。你在尝试什么？

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

祝你好运

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

1 个答案: