网格布局居中两个div之间的div

Question

我设法将div元素集中在我的行类中但是当我在左侧和右侧添加另外两个div时，我无法拥有这些元素在正确的位置流动（一个在最左边，一个在最右边）。

这是code pen

上的代码

<div class="row">
    <div class="col-1-12">
        Left
    </div>

    <div class="col-3-12 centred">
        Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>  


     <div class="col-1-12 offset-10-12">
         right
     </div>
</div>

Answer 1

也许您可以尝试使用offset-和col-类：

<div class="row">
    <div class="col-1-12">left</div>
    <div class="col-4-12 offset-3-12">Duis aute ...</div>
    <div class="col-1-12 offset-3-12">right</div>
</div>

请注意，如果您的网格基于12列，则需要偏移量和列的总和恰好为12才能使其适合。

演示：http://jsfiddle.net/EBZHJ/