Question

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

Answer 1

这取决于您希望如何使图库居中。

您需要记住一些事项。为了集中某些HTML，您需要具有集中元素的设置宽度。

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

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

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

然后按如下方式将其添加到容器中：

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

集中化的秘诀在于边距：0px auto; ，这是现代网络开发的惯例，用于集中内容。

Have a look at this code

P.S。不要使用 align =“center”它会在更高版本的HTML中折旧。最好不要养成使用它的习惯，并坚持使用CSS类为你集中处理。

Answer 2

你不应该使用对齐。这是一个弃用的财产。要使用容器居中，您需要指定固定宽度并自动添加边距。

例如：

#container {
width:970px;
margin: 0 auto;
}

您可以删除div.img

上的填充

集中和整合图库

2 个答案: