Центрирование изображений в строке без использования фактических строк / списков

Question

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

В любом случае, на вопрос (ы), мое первое, что я пытаюсь выяснить, как центрировать мои фотографии. Как вы увидите в приведенном ниже коде, я фактически не использовал элемент row или list, потому что хотел большей гибкости для мобильного использования. Я хочу, чтобы изображения располагались по центру подряд по горизонтали на странице. Я пробовал кучу разных вещей, а именно flexbox, но ничего не работает.

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

вот HTML (у меня, очевидно, еще много записей на реальной странице)

<div class="content">
<div class="wrapper">

<!--- ENTRY --->

<div class="entry">
<div class="clip">
<div class="clothes"><img src="img/t1.jpg" alt="Mustard Long Sleeve Shirt"></div></div>
<div class="infohover">
<div class="info">
<li style="text-align:center;">
<b><div class="label">Long Sleeves</div></b><br>
<b>20.99</b><br>
<b>5 Colors</b><br>
<div class="stars"><img src="img/stars.png"></div>
<a>Quick View</a> </li>
</div>
</div>
</div>
<!--- END ENTRY --->
<!--- ENTRY --->
<div class="entry">
<div class="clip">
<div class="clothes"><img src="img/t2.jpg" alt="White Blouse"></div></div>
<div class="infohover">
<div class="info">
<li style="text-align:center;">
<b><div class="label">Cotton Blouse</div></b><br>
<b>18.99</b><br>
<b>2 Colors</b><br>
<div class="stars"><img src="img/stars.png"></div>
<a>Quick View</a> </li>
</div>
</div>
</div>
<!--- END ENTRY --->
</div>
</div>

HTMLдля заголовка

<header>
    <link href="https://fonts.googleapis.com/css?family=Major+Mono+Display&display=swap" rel="stylesheet">
    <h1>District Apparel</h1>
</header>

HTML для навигации

<nav>
    <link href="https://fonts.googleapis.com/css?family=Lato|Major+Mono+Display|Oswald|Roboto&display=swap" rel="stylesheet">
    <ul>
        <li><a href="#">Shop Tops</a></li>
        <li><a href="#">Shop Bottoms</a></li>
        <li><a href="#">Shop Dresses</a></li>
        <?php
            if ($mobile==false){
        ?>
        <li><a href="#">Shop Jackets</a></li>
        <li><a href="#">Shop Shoes</a></li>
        <li><a href="#">Shop Accessories</a></li>


        <?php
            }
        ?>
    </ul>
</nav>

Вот CSS

h1 {
  background-color: #EDC7B7;
  Margin: 0;
  Padding: 0;
  overflow: hidden;
  font-family: 'Major Mono Display', monospace;
  color: #A41938;
  font-size: 40px;
  }

body {
    color: #828282;
    font-weight: 100;
    background:#f6f6f6;
    font-family:'champagne';
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  vertical-align: middle;


}

.wrapper {
    position: relative;
    top: 80px;
    margin-bottom: 100px;
    min-height: 800px;
    text-align: justify;
    line-height: 100%;

}

.entry {
  background:#fff;
  float:left;
  margin:5px;
  width:310px;
  height:400px;
  border: solid #123C69 2px;
}

.clothes {
  z-index:9;
  margin-top:0px;
 }

.clothes img {
  width:310px;
  height:400px; }

.clip {
  -webkit-clip-path: polygon(100 100%, 100% 100%, 100% 100%, 100% 100%);
  clip-path: polygon(100 100%, 100% 100%, 100% 100%, 0% 100%);
  background:#fff;
  width:300px;
  height:350px; }

Редактировать: Вот ссылка на codepen для более полной картины проекта.

Answer 1

Избавьтесь от content div в целом и вместо этого примените flex к wrapper. Все, что вам нужно, это display: flex; justify-content: center: flex-wrap: wrap. Обратите внимание, что проблема произошла, потому что flex применяет direct children flex-бокса. У вас были предметы на два уровня ниже.

Answer 2

Я бы начал с того, чтобы убедиться, что ваш HTML верен. Атрибуты типа style="text-align:center;" не будут работать, если элементы, к которым они применяются, сформированы неправильно.

Также ваши <li> являются элементами списка, и они должны быть частью списка. Списки могут быть упорядоченным списком ol (элементы списка будут пронумерованы) или неупорядоченным списком ul (элементы списка будут просто маркерами), выбор за вами, но в любом случае элементы списка должны быть включены в списоксначала:

Использовать неупорядоченный список

• , когда
• заказ
• не
• имеет значение

И упорядоченный список

1. когда
2. это
3. делает

А у вас есть пара <div class="label"> 'там должны быть ваши элементы списка (li). Поэтому вместо:

<div class="label">Long Sleeves</div>

я бы изменил это на:

<ul> <li>Long Sleeves</li> </ul>

Answer 3

Я думаю, что вашу проблему с изображениями можно решить с помощью гибких свойств

    .wrapper {
       position: relative;
       top: 80px;
       margin-bottom: 100px;
       min-height: 800px;
       text-align: justify;
       line-height: 100%;
       display: -ms-flexbox;
       display: -webkit-box;
       display: flex;
       -ms-flex-wrap: wrap;
       flex-wrap: wrap;
    }

Посмотрите на пять последних строк ...

И ваша проблема с белой рамкой вокруг заголовка, это полетела. Итак:

    body {
       color: #828282;
       font-weight: 100;
       background:#f6f6f6;
       font-family:'champagne';
       margin: 0;
       padding: 0;
    }

Посмотрите на две последние строки ... И добавьте этот код начала файла стиля, чтобы в будущем не было проблем с заполнением

    * {
       -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
       box-sizing: border-box;
    }

И извините за мойплохой английский:)