如何将左右浮动的div放在中间的旁边

Question

图像：

我想让它们全部集中在页面中间，右侧和左侧浮动的div紧挨着中间的那个。

通过对左右浮动div使用margin-left: [val]px和margin-right: [val]px，我可以针对特定屏幕尺寸实现此效果。但是，由于页面的宽度是动态的（我使用的是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可以选择吗？然后它变得非常简单：

＆＃13;

＆＃13;

/* 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 }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;