css - 如何使浮动的 div 居中：在响应式布局中留下？

Question

我需要将浮动的 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;
}

检查这个小提琴：小提琴