html - 集中和整合图片库

HTML / CSS新手问题。

我已经坚持了一段时间。我希望将我的图像库居中放置，并且还要使图像之间的填充更紧密。我在想我需要一个容器，但是，当我尝试时，我一直都在拧紧它。任何帮助将是巨大的！

    <div id="container" align="center">
<div class="img">
    <a href="#">
    <img src="#" alt="PIcture1" width="210" height="180">
    </a>
    <div class="desc">BLAH</div>
</div>


<div class="img">
    <a href="#">
    <img src="Images/9700_1915630577543_1314909545_n.jpg" alt="oldman" width="210" height="180">
    </a>
    <div class="desc">BLAH</div>
</div>

<div class="img">
    <a href="#">
    <img src="#" alt="Picture3" width="210" height="180">
    </a>
    <div class="desc">BLAH</div>
</div>

<div class="img">
    <a href="#">
    <img src="#" alt="Picture4" width="210" height="180">
    </a>
    <div class="desc">BLAH</div>
</div>
</div>

   

CSS：

#container{
}

div.img
  {
  margin:5px;
  padding: 5px;
  border:none;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:5px;
  border:none;
  }
div.img a:hover img
  {
  border:none;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:5px;
  }

最佳答案

这取决于您要如何使画廊居中。

您需要牢记一些事情。为了集中一些HTML，您需要具有一定宽度的集中元素。

以下是供您使用的一些代码：

在CSS中创建一个“中心”类，如下所示：

div.centre{
    margin:0px auto;
    width:800px;
}

然后将其添加到您的容器中，如下所示：

<div id="container" class="centre">

集中化的秘密在于margin：0px auto；这是现代Web开发用于集中化内容的惯例。

Have a look at this code

ps。不要使用align =“ center”，它在更高版本的HTML中已弃用。最好不要养成使用它的习惯，而坚持使用CSS类为您集中事物。