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

Popular posts from this blog

image - ClassNotFoundException when add a prebuilt apk into system.img in android -

I need to import mysql 5.1 to 5.5? -

Java, Hibernate, MySQL - store UTC date-time -