html - 通过CSS向右移动div标签

Question

我有 3 个 div 标签，它们在左侧对齐并向左浮动。 问题是上面还有一个内容width: 80rem;我想把它们放在中心。 我尝试了很多组合，但我无法让第一张图片与上面的对象对齐。

CSS

.beachcontent{
background-color: #FAFCE8;
margin: auto;
margin-bottom: 5px;
border: 0.1rem solid black;
padding: 0.2rem;
width: 26.6rem;
text-align: center;
margin-left: 2.5px;
margin-right: 2.5px;
float: left;
}

HTML

<div class="beachcontent">  <!--starting div beachcontent-->
<h4>Sardinia</h4>
<a href="sardinia.html"><img src="images/sardinia.jpg" width="330" height="220" alt="Sardinia"></a>
</div>                      <!--ending div beachcontent-->
<div class="beachcontent">  <!--starting div beachcontent-->
<h4>Sicily</h4>
<a href="sicily.html"><img src="images/sicily.jpg" width="330" height="220" alt="Sicily"></a>
</div>                      <!--ending div beachcontent-->
<div class="beachcontent">  <!--starting div beachcontent-->
<h4>Elba</h4>
<a href="elba.html"><img src="images/elba.jpg" width="330" height="220" alt="Elba"></a>
</div>                      <!--ending div beachcontent-->
</main>
<!--several br lines to display hr below beachcontent divs-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--TO BE FIXED IF POSSIBLE-->

另一个小问题是我必须使用多个 <br>要显示的行 <hr> beachcontent div 下面，这不是很优雅。有没有更好的方法来解决这个问题？ 提前致谢。

Answer 1

我想我找到了解决您问题的方法。 我将您所有的 div 分组到另一个 div 中，并将其设置为 82rem 的宽度和自动边距。您必须自定义宽度以适合您的设计。 试试下面的代码:

.beachcontent{
background-color: #FAFCE8;
margin-bottom: 5px;
border: 0.1rem solid black;
padding: 0.2rem;
width: 26.6rem;
text-align: center;
display:inline-block;
}
#middle{
  width: 82rem;
  margin:auto;
}

<div id="middle">
<div class="beachcontent">  <!--starting div beachcontent-->
<h4>Sardinia</h4>
<a href="sardinia.html"><img src="images/sardinia.jpg" width="330" height="220" alt="Sardinia"></a>
</div>                      <!--ending div beachcontent-->
<div class="beachcontent">  <!--starting div beachcontent-->
<h4>Sicily</h4>
<a href="sicily.html"><img src="images/sicily.jpg" width="330" height="220" alt="Sicily"></a>
</div>                      <!--ending div beachcontent-->
<div class="beachcontent">  <!--starting div beachcontent-->
<h4>Elba</h4>
<a href="elba.html"><img src="images/elba.jpg" width="330" height="220" alt="Elba"></a>
</div><!--ending div beachcontent-->
</div>
</main>
<!--several br lines to display hr below beachcontent divs-->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--TO BE FIXED IF POSSIBLE-->

能否请您澄清一下您的换行标记的问题？ 希望这有帮助