如何将浮动div和左右div推向中间一个

Question

图片：

我想让它们全部居中在页面中间，左右浮动的div紧贴在中间的那个旁边。

我可以通过使用margin-left: [val]px和margin-right: [val]px左右浮动div来实现特定屏幕尺寸的效果。 但是，由于页面的宽度是动态的（我使用的是ZURB Foundation 5），我无法指定具体的值，因为不同的显示将以不同的方式呈现页面，通常会导致中间div被下推。

这是我现在拥有的代码：

的HTML

<div id="container">

<div class="hide-for-small" id="templatemo_wrapper_left">
    <table>
        .
        .
        .
    </table>
</div>

<div class="hide-for-small " id="templatemo_wrapper_right">
    <table>
        .
        .
        .
    </table>
</div>

<div class="center">
    .
    .
    .
</div>

</div>

的CSS

    #templatemo_wrapper_left {
    float: left;
    width: 120px;
}

    #templatemo_wrapper_right {
    float: right;
    width: 120px;
}

    #container {
    text-align: center;
}

.center {
    text-align: left;
    display: inline-block;
}

    #templatemo_wrapper_left table, #templatemo_wrapper_right table {
    position: relative;
    border: none;
    text-align: center;
    width: 120px;
}

我已经尝试解决此问题一段时间了，希望能有所帮助。 谢谢！

Answer 1

您真的需要浮动吗？ 还是可以选择display:flex作为选择？ 然后，它变得非常简单：

 /* solution */ .container { display: flex; justify-content: center; } /* for demo purposes */ * { height: 50px } .container { width: 400px; background-color: rgba(0,0,0,.1) } .content { width: 100px; background-color: green } .hidden-xs { width: 10px; background-color: blue } 

 <div class="container"> <div class="hidden-xs"></div> <div class="content"></div> <div class="hidden-xs"></div> </div>