html - 在不使用实际行/列表的情况下连续居中图像

Question

所以我实际上有两个问题，但我认为它们有点相互关联，我不确定这是否违反规则，所以请告诉我，如果需要，我可以将其分成两个不同的帖子。

不管怎样，关于问题，我的第一个问题是我想弄清楚如何使我的照片居中。正如您将在下面的代码中看到的，我实际上并没有使用 row 或 list 元素，因为希望移动使用具有更大的灵 active 。我希望图像在页面上水平排成一行。我尝试了很多不同的东西，即 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;证明内容:居中:flex-wrap:wrap。请注意，问题的发生是因为 flex 应用了 flex 框的直接子。您将元素降低了两层。