div etiketini sağdan CSS'ye taşıyor

Question

Sol tarafımda hizalı ve sola kaydım 3 div etiketim var. Sorun yukarıda width: 80rem;'un başka bir içeriği var ve bunları ortalamak istiyorum. Çok fazla kombinasyon denedim, ancak yukarıdaki resmin üstündeki 1. resmi başlatmaya başlayamıyorum.

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--> 

başka bir küçük sorun gerçekten zarif değildir beachcontent div aşağıda <hr> görüntülemek için birkaç <br> hatları kullanmak zorunda olmasıdır. Bunu düzeltmenin daha iyi bir yolu var mı? Şimdiden teşekkürler.

Answer 1

Ben senin sorunu için bir çözüm buldum. Tüm div'larınızı başka bir div içinde gruplandırdım ve 82 karakterlik bir genişlik ve bir otomatik marj koydu. Genişliği tasarımınıza uyacak şekilde özelleştirmelisiniz.

.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-->

Eğer kırılma çizgisi etiketi ile sorunu aydınlatabilir misiniz: Aşağıdaki kodu deneyin ? Bu yardımcı olur