居中的面板

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

這裏是一個片段：

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

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

有誰知道我能做到這一點？

我以爲使用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的使用Flex

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

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

     }