How to center two primefaces buttons using css?

Question

What I need to do is to center vertically two buttons. I've tried adding div-container with margin-left:auto; margin-right:auto margin-left:auto; margin-right:auto and it doesn't work. Also these buttons move up and down when scrolling the page to be always visible.

What I have at the moment is:

  <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> 

On my page it's exactly on the left side.

SOLVED BY:

adding in js script:

        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);

40 that I add in second Math.round is the space between buttons.

Answer 1

To center with margins auto, the element must be position relative. In order to solve in your code, you have inline-block, so don't fit in the entire horizontal page. You change to block and it works.

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

The buttons are absolute positioning, another error. What are you trying with it?

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

Good luck