css - N×2 网格，如果最后一行只有一列，则将其居中

Question

我想要一个像这样的 N×2 网格，其中一些元素(列)可能会根据运行时因素设置为 display:none ，从而使行数和在设计时预先未知的列。所以它可能看起来像这样:

1 2
3 4
 5

或

1 2
4 5 (3 is missing)

或

1 3 (2, 5 is missing)
 4  (4 is the last column)

我希望最后一个元素始终居中。

我制作每个 div .col-xs-6 以使网格为 N×2。

如何使最后一列始终位于中间？最后一列，在设计时事先是未知的，所以我不能对它做任何特别的事情，比如偏移它，因为我只能偏移所有列，因为它们中的任何一个都可能是最后一列。

http://jsfiddle.net/d8xwyzza/

如果这不是单独使用 CSS 或 Bootstrap 无法完成的事情，请也告诉我。

Answer 1

就您而言，您可以使用 last-child 属性。但是您需要找到奇数最后一个元素，因为即使最后一个元素也不需要位于中心位置。所以你可以通过以下方式使用它。

.col-xs-6
{
  display:inline-block;
  text-align:center;
}
.col-xs-6:nth-last-child(1):nth-child(odd) { /* This will find last child with odd element */
  display:inline-block;
  text-align:center;
  width:100%;
}

DEMO