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

in code trying put arrow buttons extreme left , right of div , mid div must in middle of div have seen manny question on not getting proper answer can me problem is?.

what want mid div can of size containing 5 buttons may contain more or less that how centre div can 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>       

you can't use < in html... browser see opening tag. use special characters instead < , >

<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, question. display #mid div inline-block, , add text-align #page-nav. float both left , right arrow sides.

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

note removed height of #page-nav buttons wrap nice in it.

jsfiddle