N-by-2 grid, and if the last row has only a single column, center it

Question

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

or

1 2
4 5 (3 is missing)

or

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

I want the last element to be always centered.

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/

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

Answer 1

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

DEMO