Центрирование элементов Div, когда экран меньше 768 пикселей?

Question

Проблема: Сетка моего продукта не будет центрироваться под 576px.

Вопрос: Как я могу создать CSS, чтобы центр продукта находился под 576px

Я бы хотел, чтобы размер экрана был ниже 768, чтобы продукты были отцентрированы.Это в основном для мобильных устройств, потому что я имею размеры, уменьшенные, чтобы 2 можно было разместить в строке, но они немного выровнены по левому краю.

Это HTML:

<div class="right">
   <div class="center">
      <h1>Talent</h1>
   </div>    
   <div class="product-">
      <% @listings.each do |listing| %>
        <div class="image-circle">
            <div class="listing-page-images" id="listing-image-resize">
                <%= link_to image_tag(listing.image_url(:listing_index_4), id: "listing-image-resize-2"), listing, id: "listing-image-resize", data: {id: listing.id, name: listing.name} %>
            </div>
            <div class="text-over">
               <p><%= link_to listing.user.name, listing, id: "" %></p>
            </div>
         </div>
      <% end %>
   </div>
</div>

css:

.right {
  flex: 70%;
  padding: 15px;
  padding-top: 20px;
  font-family: Helvetica, sans-serif ;
  font-weight: 600 ;
}

 .product- {
   padding-top: 30px;
   display: flex;
   flex-wrap: wrap;
 }

@media only screen and (max-width: 576px) {
   #listing-image-resize {
     width:  100px !important;
     height:  150px !important;
     top: 50%;
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
     max-width: 100%;
     max-height: 100%;
   }
   #listing-image-resize-2 {
     position: absolute;
     width:  100px !important;
     height:  150px !important;
     top: 50%;
     left: 50%;
     max-width: 100%;
     max-height: 100%;
   }

 }

Одна вещь, которую я заметил , это то, что от 768 до 576 пикселей, продуктыцентрированы на странице - с моим правилом @media 576px css и без него.

Я использую загрузчик 4, и я предполагаю, что он что-то делает автоматически, но я не нашел ответов на то, что происходит на этом экранеДиапазон размеров, чтобы центрировать все.

Все это содержится в теге body, для которого нет правил @media css.

Answer 1

Если вам нужно центрировать элементы внутри .product-, то добавьте:

.product- {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;

  //Add This
  align-items: center;
  justify- content: center;
}

, если вам нужно центрировать .product-, затем добавьте:

.product- {
  padding-top: 30px;
  display: flex;
  flex-wrap: wrap;

  //Add This
  margin-right: auto;
  margin-left: auto;

  align-items: center;
  justify- content: center;
}