How can we centre the div in a div with buttons to its left and right?

Question

In my code I am trying to put the arrow buttons to the extreme left and right of the div and the mid div must be in the middle of the div I have seen manny question on this but not getting the proper answer can Anybody help me what exactly the problem is?.

what I want is the mid div can of any size so it is containing the 5 buttons but it may contain more or less that that so how to centre that div so this can be achievable.

#page-nav{
        width:400px;
        border:1px solid;
        height:20px;
}
    
#right{
        float:right;
}
#mid{
        margin: 0 auto;
        width:auto;
}

<div id='page-nav'>
          
  <button id=left></button>
        
  <div id="mid">
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <button>5</button>
    
  </div>
    
  <button id="right"></button>
</div>


 

Answer 1

You can't use < in your HTML... the browser will see it as an opening tag. Use special characters instead < and >

<div id='page-nav'>
    <button id="left">&lt;</button>
    <div id="mid">
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button>4</button>
        <button>5</button>
    </div>
    <button id="right">&gt;</button>
</div>

Then, to your question. Display the #mid div as an inline-block, and add text-align to #page-nav. Then float both the left and right arrow to the sides.

#page-nav {
    width:400px;
    border:1px solid;
    /*height:20px;*/
    text-align: center;
}
#left {
    float: left;
}
#right {
    float:right;
}
#mid {
    display: inline-block;
}

Note that I removed the height of #page-nav so the buttons wrap nice in it.

JSFiddle

Answer 2

use

CSS

#page-nav {
    width:400px;
    border:1px solid;
    height:25px;
    text-align:center;
}
#right {
    float:right;
}
#mid {
    display:inline-block;
}
#left {
    float:left;
}

FIDDLE DEMO