Foundation 中的中心列组答案

【问题标题】：Center group of columns in FoundationFoundation 中的中心列组
【发布时间】：2015-02-21 01:17:28
【问题描述】：

有没有办法在 Foundation 中将一组奇数列居中？由于不均匀，我看不出如何使用提供的偏移选项来实现这一点，因为偏移量必须是非整数。

下图解释了我想要实现的目标。一共6个单列div，其中5个在整行居中，与第一列有2.5列的偏移量。

【问题讨论】：

你能把所有的中心 div 包在另一个 div 中，然后把那个 div 居中吗？或者也许你可以增加列数......

标签： html zurb-foundation zurb-foundation-5

【解决方案1】：

这个解决方案在 Foundation 术语中有点非正统，但你的设计需要一个非正统的解决方案。

首先在 CSS 中给该行一个半列宽的右边距； 1 列 = 8.3333% 宽度，因此该填充应为 4.1666%。

接下来给第一列的右边距也为 4.1666%。

现在给第二列一个 2 列的偏移量，你应该在那里（最后一列也需要 class end 以使其与前一列左对齐）。

<div class="column first-column">...</div>
<div class="column large-1 large-offset-2">...</div>
...[other columns]...
<div class="column end">...</div>

.row { padding-right: 4.1666%; }
.first-column { margin-right: 4.1666%; !important}

您可能需要 !important 在这些不寻常的边距和内边距上一个（我不记得副手了）来覆盖列上 margin:0 的 Foundations 设置 - 如果没有它，这些内边距和边距就无法工作，请尝试 !important） . （注意：我从 Foundation 5 开始工作，我没有使用早期版本）。

【讨论】：

谢谢，这可能行得通。我会尝试找到一种非css的方式，如果我失败了，我会接受你的回答。