css - 如何使 float : left in responsive layout? 的 div 居中

Question

我需要在响应式布局中将 float: left 的 div 居中。我的意思是将它们以小布局居中，即使它们移动到新行也是如此。 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%;   
}

Answer 1

对您的代码做了一点改动。 使用

.buttons a, .buttons button {
    display:inline-block;
    margin:auto;
}

检查这个 fiddle :Fiddle