如果最后一个元素是最后一个并且是连续的，则将它居中

Question

我有一个引导程序网格，其中内容是动态加载的。如果最后一个元素在行中单独存在，则应居中。

我想要的是：

A   B
C   D
E   F
  G

HTML代码：

A   B
C   D
E   F
  G

div {
  border: 1px solid red;
}

我得到了什么：

A   B
C   D
E   F
G   

我用 css selector 试过了:nth-last-of-type()，但是有了这个选择器，每个“最后一个元素”都会得到属性。

有人知道怎么做吗？我希望我能用你能理解的方式来解释它。

Answer 1

很简单，你可以使用display:flexand text-align: center。

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    justify-content: space-around;
}
.flex-item {
    background: tomato;
    padding: 5px;
    width: 200px;
    height: 150px;
    margin-top: 10px;
    line-height: 150px;
    color: white;
    font-weight: bold;
    font-size: 3em;
    text-align: center;
}

<ul class="flex-container">
    <li class="flex-item">1</li>
    <li class="flex-item">2</li>
    <li class="flex-item">3</li>
    <li class="flex-item">4</li>
    <li class="flex-item">5</li>
    <li class="flex-item">6</li>
    <li class="flex-item">7</li>
</ul>

Answer 2

结合 last-child 和 nth child 会起作用，然后您可以将元素集中放置。此示例使用左 50% 变换：translateX(-50%);

https://codepen.io/anon/pen/zPNWxK

<div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
</div>

div {
  height:20px;
  box-sizing:border-box;
  background-color:blue;
  border:1px solid #fff;
}

div:last-child:nth-child(odd) {
  background-color:red;
  left:50%;
  transform:translateX(-50%); 
}

当你真正这样做时，当然不要使用 div 作为实际的选择器