所以我在html和css上非常生疏。我目前正在为一所学校项目工作。我已经为我的10张照片创建了所有css属性来执行我想要他们做的事情（滚动时边框会改变颜色）。然而，对于我的生活，我无法弄清楚如何使图像居中。我想尝试每行三个图像，一个额外的图像。任何建议将不胜感激。再一次，我真的生锈了，所以这可能是一个简单的修复。
div.gallery {
margin: 5px;
border: 5px solid white;
float: left;
width: 400px;
}
div.gallery:hover {
border: 5px solid yellow;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
a.ex1:hover,
a.ex1:active {
color: yellow;
}
a.ex2:hover,
a.ex2:active {
color: yellow;
}
a.ex3:hover,
a.ex3:active {
color: yellow;
}
a.ex4:hover,
a.ex4:active {
font-size: 200%;
color: yellow;
}
img {
text-align: center;
}<h1 class="work1">
<center><a class="ex1">Photography Assignment</a></center>
</h1>
<center>
<div class="gallery">
<a target="_blank" href="images/SS1.png">
<img src="images/SS1.png" alt="Margaret's bag" height="200" width="300">
</a>
<div class="desc">An extreme close up of Margaret's bag</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS2.png">
<img src="images/SS2.png" alt="Margaret's notes" height="200" width="300">
</a>
<div class="desc">A picture of Margaret's bag</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS3.png">
<img src="images/SS3.png" alt="Close up of Margaret's face" height="200" width="300">
</a>
<div class="desc">A close up of Margaret against a pink house</div>
</div>
<br>
<br>
</center>
<div class="gallery">
<a target="_blank" href="images/SS4.png">
<img src="images/SS4.png" alt="A medium shot of Margaret" height="200" width="300">
</a>
<div class="desc">A medium shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS5.png">
<img src="images/SS5.png" alt="A medium long shot of Margaret" height="200" width="300">
</a>
<div class="desc">A medium long shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS6.png">
<img src="images/SS6.png" alt="A long shot of Margaret in motion" height="200" width="300">
</a>
<div class="desc">A long shot of Margaret in motion</div>
</div>
<br>
<div class="gallery">
<a target="_blank" href="images/SS7.png">
<img src="images/SS7.png" alt="A upward medium shot of Margaret" height="200" width="300">
</a>
<div class="desc">An upward medium shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS8.png">
<img src="images/SS8.png" alt="A telephoto shot of a sunflower with Margaret in the background" height="200" width="300">
</a>
<div class="desc">A telephoto shot of a sunflower with Margaret in the background</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS9.png">
<img src="images/SS9.png" alt="A telephoto shot of Margaret" height="200" width="300">
</a>
<div class="desc">A telephoto shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS10.png">
<img src="images/SS10.png" alt="A wide shot of Margaret getting into a firetruck" height="200" width="300">
</a>
<div class="desc">A wide shot of Margaret</div>
</div>
<br>
<h1>
<center><a class="ex1">Poster Assignment</a></center>
</h1>
答案 0 :(得分：1)
由于我无法发表评论，您可以在img标签中添加以下内容，也可以使用“. '
img {
display: inline-flex;
margin : 0 auto;
}
答案 1 :(得分：0)
只需添加text-aling：center到您的图库类。 您也可以通过其他方式（例如flexbox）执行此操作，但这是最简单的方法。 希望它会有所帮助。
.gallery {
margin: 5px;
border: 5px solid white;
float: left;
width: 400px;
text-align: center;
}
.gallery:hover {
border: 5px solid yellow;
}
.gallery img {
max-width: 100%;
height: auto;
}
.desc {
padding: 15px;
text-align: center;
}
a.ex1:hover,
a.ex1:active {
color: yellow;
}
a.ex2:hover,
a.ex2:active {
color: yellow;
}
a.ex3:hover,
a.ex3:active {
color: yellow;
}
a.ex4:hover,
a.ex4:active {
font-size: 200%;
color: yellow;
}<h1 class="work1">
<center><a class="ex1">Photography Assignment</a></center>
</h1>
<div class="gallery">
<a target="_blank" href="images/SS1.png">
<img src="images/SS1.png" alt="Margaret's bag" height="200" width="300">
</a>
<div class="desc">An extreme close up of Margaret's bag</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS2.png">
<img src="images/SS2.png" alt="Margaret's notes" height="200" width="300">
</a>
<div class="desc">A picture of Margaret's bag</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS3.png">
<img src="images/SS3.png" alt="Close up of Margaret's face" height="200" width="300">
</a>
<div class="desc">A close up of Margaret against a pink house</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS4.png">
<img src="images/SS4.png" alt="A medium shot of Margaret" height="200" width="300">
</a>
<div class="desc">A medium shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS5.png">
<img src="images/SS5.png" alt="A medium long shot of Margaret" height="200" width="300">
</a>
<div class="desc">A medium long shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS6.png">
<img src="images/SS6.png" alt="A long shot of Margaret in motion" height="200" width="300">
</a>
<div class="desc">A long shot of Margaret in motion</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS7.png">
<img src="images/SS7.png" alt="A upward medium shot of Margaret" height="200" width="300">
</a>
<div class="desc">An upward medium shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS8.png">
<img src="images/SS8.png" alt="A telephoto shot of a sunflower with Margaret in the background" height="200" width="300">
</a>
<div class="desc">A telephoto shot of a sunflower with Margaret in the background</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS9.png">
<img src="images/SS9.png" alt="A telephoto shot of Margaret" height="200" width="300">
</a>
<div class="desc">A telephoto shot of Margaret</div>
</div>
<div class="gallery">
<a target="_blank" href="images/SS10.png">
<img src="images/SS10.png" alt="A wide shot of Margaret getting into a firetruck" height="200" width="300">
</a>
<div class="desc">A wide shot of Margaret</div>
</div>
<br>
<h1>
<center><a class="ex1">Poster Assignment</a></center>
</h1>