css - How to center the divs that float: left in responsive layout? -
i need center divs float: left in responsive layout. mean center them in small layout, if moves new line. http://jsfiddle.net/allegrissimo123/njpce/
<div class="buttonwrapper"> <div class="buttons"> <a href="">button 1</a> <a href="">button 2</a> <a href="">button 3</a> <a href="">button 4</a> </div> </div> .buttons a, .buttons button{ display:block; float:left; margin:0 7px 0 0; background-color:#f5f5f5; border:1px solid #dedede; border-top:1px solid #eee; border-left:1px solid #eee; font-size:100%; line-height:130%; text-decoration:none; font-weight:bold; color:#565656; cursor:pointer; padding:5px 10px 6px 7px; } .buttons { text-align:center; margin: 0 auto; position:relative; float:left; left:-50%; } .buttonwrapper { position:relative; float:left; left:50%; }
made little change code . use
.buttons a, .buttons button { display:inline-block; margin:auto; }
check fiddle: fiddle
Comments
Post a Comment