如何居中图片库？

Question

我使用以下代码创建了图片库：http://www.w3schools.com/css/css_image_gallery.asp

它向左对齐。我在图库中有 9 张图片。我想要做的是让 3 行 3 列的图像在页面中央对齐，两边都有边距，但我似乎无法弄清楚。

Answer 1

试试这个。 .您可以更改 #container

的宽度

<!DOCTYPE html>
<html>
<head>
<style>
#container{
width: 500px; 
margin: 0 auto;

}
div.img {
    margin: 5px;
    padding: 5px;
    border: 1px solid #0000ff;
    height: auto;
    width: auto;
    float: left;
    text-align: center;
}   

div.img img {
    display: inline;
    margin: 5px;
    border: 1px solid #ffffff;
}

div.img a:hover img {
    border: 1px solid #0000ff;
}

div.desc {
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 5px;
}
</style>
</head>
<body>
<div id="container">
<div class="img">
 <a target="_blank" href="klematis_big.htm"><img src="klematis_small.jpg" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis2_big.htm"><img src="klematis2_small.jpg" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis3_big.htm"><img src="klematis3_small.jpg" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
 <a target="_blank" href="klematis4_big.htm"><img src="klematis4_small.jpg" alt="Klematis" width="110" height="90"></a>
 <div class="desc">Add a description of the image here</div>
</div>
<div>
</body>
</html>

如何居中图片库？

How to center image gallery?

html

css

gallery