Question

我有一个引导网格，其中内容是动态加载的。如果最后一个元素在行中是唯一的，那么它应该居中。

我想要的是什么：

Operation name: Write VirtualNetworks
Error code: InUseSubnetCannotBeDeleted
Message: 
Subnet api-gateway-subnet is in use by /subscriptions/cdf495e8-6232-4a61-a661-716fec93f8b5/resourceGroups/KuberGoPlay/providers/Microsoft.Network/applicationGateways/ngaz-appgw-play/gatewayIPConfigurations/appGatewayIpConfig and cannot be deleted.

HTML代码：

＆＃13;

A   B
C   D
E   F
  G

＆＃13;

div {
  border: 1px solid red;
}

＆＃13;

我得到了什么：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-md-6">a</div>
  <div class="col-md-6">b</div>
  <div class="col-md-6">c</div>
  <div class="col-md-6">d</div>
  <div class="col-md-6">e</div>
  <div class="col-md-6">f</div>
  <div class="col-md-6">g</div>
</div>

我尝试使用css选择器A B C D E F G，但是使用此选择器每个＆＃39;最后一个元素＆＃39;获得属性。

任何人都知道如何做到这一点？我希望我能以你能理解的方式解释它。

Answer 1

很简单，您可以使用display:flex和text-align: center。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

将最后一个孩子和第n个孩子结合起来，然后你可以集中定位你的元素。此示例使用左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用作课程的实际选择器

Answer 3

你可以组合：nth-child（odd）和：last-child来检查元素是否是行中的最后一个，如下所示：

CSS：

.row {
  width: 200px;
}
.col-md-6 {
  width: 50%;
  float: left;
  text-align: center;
}
.col-md-6:nth-child(odd):last-child {
  width: 100%;
}

HTML：

<div class="row">
    <div class="col-md-6">a</div>
    <div class="col-md-6">b</div>
    <div class="col-md-6">c</div>
    <div class="col-md-6">d</div>
    <div class="col-md-6">e</div>
    <div class="col-md-6">f</div>
    <div class="col-md-6">g</div>
</div>

Here's a Codepen

Answer 4

如果您确定最后一个是奇数（因此它将在该行中单独存在），您可以使用自举偏移系统并将其写为：

<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 col-md-offset-3"></div>

参考：Bootstrap OffSet

Answer 5

text-align: center last-child div，如下所示。

以完整页面模式打开代码段以查看您想要的结果

＆＃13;

div:last-child{
text-align: center;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
    <div class="col-md-6">A</div>
    <div class="col-md-6">B</div>
    <div class="col-md-6">C</div>
    <div class="col-md-6">D</div>
    <div class="col-md-6">E</div>
    <div class="col-md-6">F</div>
    <div class="col-md-6 ">G</div>
</div>

＆＃13;

Answer 6

我认为您正在寻找：最后一个孩子选择器

中心最后一个元素，如果它是最后一个并且单独连续

6 个答案: