N x 2网格，如果最后一行只有一列，则将其居中 [英] N-by-2 grid, and if the last row has only a single column, center it

问题描述

我想要一个这样的N×2网格，其中某些元素（列）可能会根据运行时因素设置为 display：none ，使行和列的数量在设计时预先未知。因此它看起来像这样：

I want to have an N-by-2 grid like this, in which some elements (columns) might be set to display:none based on run-time factors, making the number of rows and columns unknown in advance at the design time. So it could look like this:

1 2
3 4
 5

或

1 2
4 5 (3 is missing)

或

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

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

I want the last element to be always centered.

我将每个 div .col-xs-6 使网格N-by-2。

I make each div .col-xs-6 to make the grid N-by-2.

我该怎么做才能使最后一列始终居中？最后一列在设计时是未知的，因此我无法像偏移它那样做任何特别的事情，因为我只能偏移所有列，因为它们中的任何一个都可能是最后一列。

What can I do to make the last column to always be in center? Last column, which is unknown in advance at the design time, so I can't do anything particularly to it like offset it, because I can only offset all the columns because any of them could potentially be the last column.

http://jsfiddle.net/d8xwyzza/

如果这不是仅靠CSS或Bootstrap无法完成的事情，请也告诉我。

If this isn't something that can't be done with CSS or Bootstrap alone please let me know as well.

推荐答案

在您的情况下，您可以使用 last-child 属性。但是，您需要找到个最后一个元素，因为即使最后一个元素也不需要居中。因此，您可以按以下方式使用它。

In your case, you can use last-child property. But you need to find the odd last element, because even last element no need to come in center place. So you can use it in the following way.

.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%;
}

演示

这篇关于N x 2网格，如果最后一行只有一列，则将其居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！