materializecss 轮播中心对齐未知数量的卡片

Question

我有一个 laravel 8 项目，其中包含带有卡片的 materializecss 轮播。轮播默认显示 5 个项目。如果我在数据库中有 5 个或更多项目，那么一切都很好。然而，少于 5 个项目时，项目堆叠在左侧。我需要它们始终居中，这与它们的数量无关。这是我的代码：

<div class="col s12 l12 center">
         <div class="carousel center">         
            @foreach($properties as $property) 
            <div class="carousel-item col m4 s8 l3">           
               <div class="card sticky-action borders-top borders-bottom" style="height: 400px;">
                  <div class="card-image waves-effect waves-block waves-light" style="height: 50%;">
                  @if($property->cover() != NULL)
                     <img class="activator" src="{{ url($property->cover()) }}" alt="office" style="height: 100%;" />
                  @endif
                  </div>
                  <div class="card-content activator">
                  <p class="activator">@foreach($property->locations as $location)
                                    {{ $location->name }}
                                    @endforeach </p>
                     <span class="card-title activator grey-text text-darken-4"> {{ $property->property_address }}
                     <p class="activator"> {{ $property->starting_price }} kr</p> 
                     </span> 
                  
                     <p class="activator">{{ $property->propertyType->name }} - {{ $property->m2 }} kvm, {{ $property->size }}</p>
                     <p class="activator">{{ $property->plot_size }} kvm tomt</p>
                     
                     <div class="card-action">
                     <span class="activator left viewing">Visas: {{ \Carbon\Carbon::parse($property->viewing_date)->isoFormat('ddd D/M') }}</span>
                     <span class="activator right viewing_date bostadonline-text mr-1">Mer Info...</span>
                     </div>
                  </div>
                  <div class="card-reveal">
                     <span class="card-title grey-text text-darken-4"> {{ $property->property_address }} <i class="material-icons right">close</i>
                     <p class="activator"> {{ $property->starting_price }} kr</p> 
                     </span>
                     <p> {{ $property->short_description }} </p>
                     <p class="center"> <a href="{{ url('/fastigheter/' . $property->slug) }}" class="btn bostadonline-blue-bg-btn mt-2">Lägg bud </a></p>
                  </div>
               </div> 
            </div>                    
            @endforeach
         </div>  
      </div>

Answer 1

好吧，我把事情复杂化了。我将 carousel 上的 fullWidth 设置为 true，这把事情搞砸了。然后我添加了一些我必须删除的不必要的 css 修改。基本上，解决方案是在轮播属性上将 fullWidth 设置为 false。我不需要更改有关该问题的代码。

materializecss 轮播中心对齐未知数量的卡片

materializecss carousel center align unknown number of cards

php

materialize

laravel