LinuxQuestions.org - CCS3 - Can't get series of buttons to center in <div> box

- Programming (https://www.linuxquestions.org/questions/programming-9/)

- - CCS3 - Can't get series of buttons to center in <div> box (https://www.linuxquestions.org/questions/programming-9/ccs3-cant-get-series-of-buttons-to-center-in-div-box-4175695011/)

CCS3 - Can't get series of buttons to center in <div> box

I am stuck on how to get the series of buttons, as a group, to center in the gray box. See attachment. Any help appreciated in how to get this done. I know it is simple but I've got a brain blockage or something!!

Thanks R.

CODE

Code:

<div class="controls">



        <input type="button" name="next"  class="controls-input-connect hov"  id="next" value="Next" /> &nbsp; 

        <input type="button" name="prev"  class="controls-input-connect hov"  id="prev" value="Previous" />&nbsp;

        <input type="button" name="more"  class="controls-input-connect hov"  id="prev" value="More" onclick="window.location.href='healthConnect2.html'";/>&nbsp;        

        <input type="button" name="back"  class="controls-input-connect hov"  id="back" value="Go Back" onclick="window.location.href='healthFrontEnd.php'";/>&nbsp;

        <p id="clickmsg">Click on Id to Revise/Delete Record</p>

                        

        

</div><!--controls-->

CSS

Code:

.controls {

        padding-top: 15px;

        display:block;

        text-align: center;

        width: 500px;

        height: 30px;

        margin: auto;

        background-color: gray; /*#fff99d;*/      /*#d4ecff;*/

        font-size: 75%;

        }





.controls-input-connect  {

        display: inline-table;

          color: blue;

    text-align: center;

    width: 80px;

    height: 25px;

    font-size: 14px;

    font-weight: bold;                

        }

That screenshot does not reflect the code you've posted - there is more styles going on than you've included.

The code you've provided will give centered buttons (though I've no idea why you'd use inline-table instead of inline-block).

If you can't figure out what's going on using browser developer tools (F12), copy the page into a new single HTML file (with inline styles, and starting with "<!doctype html><meta charset=utf8 />" and gradually remove things until you've got the simplest code that you've verified still demonstrates the problem, then post that.