中心面板

Question

所以，我遇到了一些中心面板的问题。 我基本上有7个面板，每个面板都是这样的：

<div class="panel panel-background">
    <a class="panel-heading" href="">
        <span class="fa fa-check-circle"></span>
        <h1>Some text</h1>
    </a>
</div>

他们被一个有这个css的div包裹着：

display: inline-block;

然后是另一个容器，它有这个CSS：

display: flex;
justify-content: center;

所以我要做的就是始终以任何分辨率将项目放在页面的中心。 如果你看看这个codepen：

https://codepen.io/r3plica/pen/qjQGYP

你可以看到它在高分辨率下工作，但是当面板开始换行时，就会出错。我希望它即使在它们被包裹时（它们保持其边缘并且最后一项仍然在左侧，因此我不能使用flexbox）它们仍然处于中心位置。

这是一个片段：

＆＃13;

＆＃13;

.panel-background {
  color: white;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: pink;
  background-position: top center;
  margin-bottom: 12px;
  border-radius: 0;
  border: 0;
}
.panel-background .panel-heading {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 0;
  color: white;
  border: 0;
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  width: 212.5px;
  height: 425px;
}
.panel-background .panel-heading .fa {
  display: none;
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 32px;
}
.panel-background .panel-heading:hover, .panel-background .panel-heading:focus, .panel-background .panel-heading:active, .panel-background .panel-heading.active {
  text-decoration: none;
  color: white;
  position: relative;
}
.panel-background .panel-heading:hover:before, .panel-background .panel-heading:focus:before, .panel-background .panel-heading:active:before, .panel-background .panel-heading.active:before {
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  content: "";
  border: 4px solid #2D3E50;
}
.panel-background .panel-heading:active .fa, .panel-background .panel-heading.active .fa {
  display: block;
}
.panel-background h1 {
  font-size: 36px;
  font-weight: 700;
}
.panel-background p {
  margin-bottom: 0;
}

.persona-panels {
  display: flex;
  justify-content: center;
}
.persona-panels > div {
  display: inline-block;
}
.persona-panels > div .panel {
  float: left;
  margin: 7.5px;
}

＆＃13;

<section id="step-1" class="ng-scope">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <h1 class="ng-binding">How will you use it?</h1></div>
    </div>
  </div>
  <!-- ngIf: controller.group.questions.length === 1 -->
  <div class="container-fluid persona-panels ng-scope" ng-if="controller.group.questions.length === 1">
    <!-- ngRepeat: question in controller.group.questions track by $index -->
    <div ng-repeat="question in controller.group.questions track by $index" class="ng-scope">
      <!-- ngRepeat: answer in question.answers track by $index -->
      <div class="panel panel-background ng-scope" style="background-image: url(http://localhost:50001/images/Cameras/family-holidays.jpeg)" ng-repeat="answer in question.answers track by $index"><a class="panel-heading active" href="" ng-click="question.answer = answer.text" ng-class="{ active: question.answer === answer.text }" pk-panel="" style="height: 318px"><span class="fa fa-check-circle"></span><!-- ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><h1 ng-if="$index === 0" class="ng-binding ng-scope">Holidays and days out</h1><!-- end ngIf: $index === 0 --><!-- ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Light and pocket sized</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Great pictures no fuss</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Easy online sharing</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --></a></div>
      <!-- end ngRepeat: answer in question.answers track by $index -->
      <div class="panel panel-background ng-scope" style="background-image: url(http://localhost:50001/images/Cameras/capturing-activity.jpg)" ng-repeat="answer in question.answers track by $index"><a class="panel-heading" href="" ng-click="question.answer = answer.text" ng-class="{ active: question.answer === answer.text }" pk-panel="" style="height: 318px"><span class="fa fa-check-circle"></span><!-- ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><h1 ng-if="$index === 0" class="ng-binding ng-scope">Capturing activity</h1><!-- end ngIf: $index === 0 --><!-- ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Rugged and raring to go</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Dynamic action photos</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Lightweight</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --></a></div>
      <!-- end ngRepeat: answer in question.answers track by $index -->
      <div class="panel panel-background ng-scope" style="background-image: url(http://localhost:50001/images/Cameras/wedding.jpg)" ng-repeat="answer in question.answers track by $index"><a class="panel-heading" href="" ng-click="question.answer = answer.text" ng-class="{ active: question.answer === answer.text }" pk-panel="" style="height: 318px"><span class="fa fa-check-circle"></span><!-- ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><h1 ng-if="$index === 0" class="ng-binding ng-scope">Memorable occasions</h1><!-- end ngIf: $index === 0 --><!-- ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Stunning photos with ease</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Get good close-ups</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Option to control in detail</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --></a></div>
      <!-- end ngRepeat: answer in question.answers track by $index -->
      <div class="panel panel-background ng-scope" style="background-image: url(http://localhost:50001/images/Cameras/night-out.JPG)" ng-repeat="answer in question.answers track by $index"><a class="panel-heading" href="" ng-click="question.answer = answer.text" ng-class="{ active: question.answer === answer.text }" pk-panel="" style="height: 318px"><span class="fa fa-check-circle"></span><!-- ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><h1 ng-if="$index === 0" class="ng-binding ng-scope">Big nights out</h1><!-- end ngIf: $index === 0 --><!-- ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Capture the fun in low light</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Quick and easy to use</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Fit in a pocket</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --></a></div>
      <!-- end ngRepeat: answer in question.answers track by $index -->
      <div class="panel panel-background ng-scope" style="background-image: url(http://localhost:50001/images/Cameras/fast-action.jpeg)" ng-repeat="answer in question.answers track by $index"><a class="panel-heading" href="" ng-click="question.answer = answer.text" ng-class="{ active: question.answer === answer.text }" pk-panel="" style="height: 318px"><span class="fa fa-check-circle"></span><!-- ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><h1 ng-if="$index === 0" class="ng-binding ng-scope">Fast action</h1><!-- end ngIf: $index === 0 --><!-- ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Action in sharp focus</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Multiple shots never miss</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Zoom closer to the action</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --></a></div>
      <!-- end ngRepeat: answer in question.answers track by $index -->
      <div class="panel panel-background ng-scope" style="background-image: url(http://localhost:50001/images/Cameras/adventures.jpg)" ng-repeat="answer in question.answers track by $index"><a class="panel-heading" href="" ng-click="question.answer = answer.text" ng-class="{ active: question.answer === answer.text }" pk-panel="" style="height: 318px"><span class="fa fa-check-circle"></span><!-- ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><h1 ng-if="$index === 0" class="ng-binding ng-scope">Incredible adventures</h1><!-- end ngIf: $index === 0 --><!-- ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Amazing scenes in detail</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Close up when needed</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Get professional with controls</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --></a></div>
      <!-- end ngRepeat: answer in question.answers track by $index -->
      <div class="panel panel-background ng-scope" style="background-image: url(http://localhost:50001/images/Cameras/passionate.jpg)" ng-repeat="answer in question.answers track by $index"><a class="panel-heading" href="" ng-click="question.answer = answer.text" ng-class="{ active: question.answer === answer.text }" pk-panel="" style="height: 318px"><span class="fa fa-check-circle"></span><!-- ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><h1 ng-if="$index === 0" class="ng-binding ng-scope">Passionate about pictures</h1><!-- end ngIf: $index === 0 --><!-- ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Incredible control</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Super quality images</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --><div ng-repeat="item in answer.images[0].imageText track by $index" class="ng-scope"><!-- ngIf: $index === 0 --><!-- ngIf: $index > 0 --><p ng-if="$index > 0" class="ng-binding ng-scope">Get serious with lenses</p><!-- end ngIf: $index > 0 --></div><!-- end ngRepeat: item in answer.images[0].imageText track by $index --></a></div>
      <!-- end ngRepeat: answer in question.answers track by $index -->
    </div>
    <!-- end ngRepeat: question in controller.group.questions track by $index -->
  </div>
  <!-- end ngIf: controller.group.questions.length === 1 -->
</section>

＆＃13;

＆＃13;

＆＃13;

有谁知道我该怎么做？

我认为使用display: inline-block会强制div与项目的宽度相匹配，但在换行时它不起作用。

Answer 1

这就是你想要的东西吗？

.persona-panels {
  @include flex;
  @include flex-center;
  > div {
    display: flex;
    flex-flow: row wrap;
    .panel {
          margin: 0 auto 8px;
    }
  }

Answer 2

而不是让它显示：inline-block use flex

.persona-panels {
      @include flex;
      @include flex-center;

      > div {
        display: flex;
        flex-flow: row wrap;
        justify-content: center;   

      }