javascript - css center middle element in div for multiple screen sizes -

javascript - css center middle element in div for multiple screen sizes -

<div class="add_nav_header"> <div class="centerbuttons"> <a class="btnlogout smallbtn" data-role="button"></a> <a class="btnsearch smallbtn" data-role="button"></a> <a class="btnviewlist smallbtn" data-role="button"></a> </div> </div> .centerbuttons { width: 50%; margin: 0 auto; } .add_nav_header { display: inline-block; width: 100%; border-bottom: 1px solid #ccc; padding-bottom: .5em; } .smallbtn { float: right; margin: .3em; padding: .6em; font-size: .9em; } .btnlogout { float: right; } .btnviewlist { float: left; } .btnsearch { left: -33%; }

this html , css , want center middle btnsearch button don't want have set left percentage every screen size media queries.

jsfiddle example

you utilize text-align: center container , remove float div want centered.

.centerbuttons { width: 50%; margin: 0 auto; text-align: center; } .add_nav_header { display: inline-block; width: 100%; border-bottom: 1px solid #ccc; padding-bottom: .5em; } .smallbtn { /* float: right; */ margin: .3em; padding: .6em; font-size: .9em; display: inline-block; } .btnlogout { float: left; } .btnviewlist { float: right; } /* .btnsearch { left: -33%; } */

fiddle: http://jsfiddle.net/zfh1ono0/

javascript jquery html css