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;
}

检查这个小提琴：Fiddle

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

1 个答案: