html - 如何在容器中将DIV框彼此对齐？

我想将我的div框对齐到一个客户的网站，并且彼此之间非常完美，并且彼此之间的尺寸不要太大。这是与代码有关的页面：https://www.imaniskinclinic.com/treatments

这些盒子不是内联的，有些显然比其他盒子大。我添加了一个div框容器，我认为它可以更好地容纳这些框，但是似乎没有用。

谁能给我一些有关我必须做什么的帮助和指导？

下面是代码：CSS然后是HTML

.box {
  background-color: white; /* for visualization purposes */
  display: inline-block;
  max-width: 100%;

}



div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    width: 200px;
	height: 200px;
	background: #f8abbe;
}

div.gallery:hover {
    border: 1px solid #ffffff;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 10px;
    text-align: center;
	font-family : verdana, arial, helvetica, helve, sans-serif;
	color: #ffffff;
}

<div class="box">
		<div class="gallery">
  <a href="aesthetics/acne.htm" >
    <img src="images/acne.jpg" alt="Acne" width="300" height="200">
  </a>
  <div class="desc">Acne Treatments</div>
</div>

<div class="gallery">
  <a href="aesthetics/hair%20removal.htm">
    <img src="images/hairremoval.jpg" alt="Hair Removal" width="300" height="200">
  </a>
  <div class="desc">Laser Hair Removal</div>
</div>

<div class="gallery">
  <a href="aesthetics/electrolysis.htm">
    <img src="images/electrolysis.jpg" alt="Electrolysis" width="300" height="200">
  </a>
  <div class="desc">Electrolysis</div>
</div>

<div class="gallery">
  <a href="aesthetics/thread%20veins.htm">
    <img src="images/threadveins.jpg" alt="Thread Veins" width="300" height="200">
  </a>
  <div class="desc">Thread Veins</div>
</div>

<div class="gallery">
  <a href="aesthetics/microderm.htm" >
    <img src="images/microderm.jpg" alt="Microdermabrasion" width="300" height="200">
  </a>
  <div class="desc">Microdermabrasion</div>
</div>

<div class="gallery">
  <a href="aesthetics/rosacea.htm" >
    <img src="images/rosacea.jpg" alt="Rosacea" width="300" height="200">
  </a>
  <div class="desc">Rosacea</div>
</div>

<div class="gallery">
  <a href="aesthetics/pigmentation.htm" >
    <img src="images/pigmentation.jpg" alt="Pigmentation" width="300" height="200">
  </a>
  <div class="desc">Pigmentation</div>
</div>

<div class="gallery">
  <a href="aesthetics/skin%20peels.htm" >
    <img src="images/skinpeels.jpg" alt="Skin Peels" width="300" height="200">
  </a>
  <div class="desc">Skin Peels</div>
</div>

<div class="gallery">
  <a href="aesthetics/botox_lipfillers.htm" >
    <img src="images/botox.jpg" alt="Botox/Lipfillers" width="300" height="200">
  </a>
  <div class="desc">Botox & Lipfillers</div>
</div>

<div class="gallery">
  <a href="aesthetics/semiperm.htm" >
    <img src="images/microblading.png" alt="Semi Perm" width="300" height="200">
  </a>
  <div class="desc">Eyebrow Microblading & Semi-Permanent Make-up</div>
</div>

<div class="gallery">
  <a href="aesthetics/mc.html" >
    <img src="images/mc.jpg" alt="Massage and Cupping" width="300" height="200">
  </a>
  <div class="desc">Massage & Cupping</div>
</div>

</div>

最佳答案

刚刚添加的显示：inline-block;
如果您使用div大小玩一点，效果会更好

.box {
  background-color: white; /* for visualization purposes */
  display: inline-block;
  max-width: 100%;

}



div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    width: 200px;
	height: 200px;
	background: #f8abbe;
  display: inline-block;
}

div.gallery:hover {
    border: 1px solid #ffffff;
}

div.gallery img {
    width: 100%;
    height: auto;
}

div.desc {
    padding: 10px;
    text-align: center;
	font-family : verdana, arial, helvetica, helve, sans-serif;
	color: #ffffff;
}

<div class="box">
		<div class="gallery">
  <a href="aesthetics/acne.htm" >
    <img src="images/acne.jpg" alt="Acne" width="300" height="200">
  </a>
  <div class="desc">Acne Treatments</div>
</div>

<div class="gallery">
  <a href="aesthetics/hair%20removal.htm">
    <img src="images/hairremoval.jpg" alt="Hair Removal" width="300" height="200">
  </a>
  <div class="desc">Laser Hair Removal</div>
</div>

<div class="gallery">
  <a href="aesthetics/electrolysis.htm">
    <img src="images/electrolysis.jpg" alt="Electrolysis" width="300" height="200">
  </a>
  <div class="desc">Electrolysis</div>
</div>

<div class="gallery">
  <a href="aesthetics/thread%20veins.htm">
    <img src="images/threadveins.jpg" alt="Thread Veins" width="300" height="200">
  </a>
  <div class="desc">Thread Veins</div>
</div>

<div class="gallery">
  <a href="aesthetics/microderm.htm" >
    <img src="images/microderm.jpg" alt="Microdermabrasion" width="300" height="200">
  </a>
  <div class="desc">Microdermabrasion</div>
</div>

<div class="gallery">
  <a href="aesthetics/rosacea.htm" >
    <img src="images/rosacea.jpg" alt="Rosacea" width="300" height="200">
  </a>
  <div class="desc">Rosacea</div>
</div>

<div class="gallery">
  <a href="aesthetics/pigmentation.htm" >
    <img src="images/pigmentation.jpg" alt="Pigmentation" width="300" height="200">
  </a>
  <div class="desc">Pigmentation</div>
</div>

<div class="gallery">
  <a href="aesthetics/skin%20peels.htm" >
    <img src="images/skinpeels.jpg" alt="Skin Peels" width="300" height="200">
  </a>
  <div class="desc">Skin Peels</div>
</div>

<div class="gallery">
  <a href="aesthetics/botox_lipfillers.htm" >
    <img src="images/botox.jpg" alt="Botox/Lipfillers" width="300" height="200">
  </a>
  <div class="desc">Botox & Lipfillers</div>
</div>

<div class="gallery">
  <a href="aesthetics/semiperm.htm" >
    <img src="images/microblading.png" alt="Semi Perm" width="300" height="200">
  </a>
  <div class="desc">Eyebrow Microblading & Semi-Permanent Make-up</div>
</div>

<div class="gallery">
  <a href="aesthetics/mc.html" >
    <img src="images/mc.jpg" alt="Massage and Cupping" width="300" height="200">
  </a>
  <div class="desc">Massage & Cupping</div>
</div>

</div>