1

如果页面，我正在尝试将幻灯片图像放在中心。我几乎完成了，问题是图像的每一块内部都有一个小空间，就像它有一些小填充（它没有）一样，是否有人在代码中看到了错误？

<style type="text/css">
  html, body, #wrapper, images {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
    border: 0px;
    background-color: #000;
  }

  img {
    margin: 0px;
    padding: 0px;
    border: 0px;
  }

  .center {
    width: 800px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -400px;
    margin-top: -300px;
  }

  .center_mini {
    margin: 0px;
    padding: 0px;
    border: 0px;
  }

  .center_mini_float {
    float: left;
    margin: 0px;
    padding: 0px;
    border: 0px;
  }
</style>
<div class="center">
  <div class="center_mini">
    <img src="images/background_01.png" width="800" height="144" alt="bg">
    <div class="center_mini">
      <div class="center_mini_float">
        <img src="images/background_02.png" width="503" height="456" alt="bg">
      </div>
      <div class="center_mini_float">
        <div class="center_mini">
          <div class="center_mini">
            <img src="images/background_03.png" width="246" height="89" alt="bg">
          </div>
          <div class="center_mini">
            <img src="images/background_05.png" width="246" height="106" alt="bg">
          </div>
          <div class="center_mini">
            <img src="images/background_06.png" width="246" height="102" alt="bg">
          </div>
          <div class="center_mini">
            <img src="images/background_07.png" width="246" height="159" alt="bg">
          </div>
        </div>
      </div>
      <div class="center_mini_float">
        <img src="images/background_04.png" width="51" height="456" alt="bg">
      </div>
    </div>
  </div>


  <!--<img src="images/background.jpg" width="800" height="600" alt="bg">-->
</div>

4

4 回答 4

3

尝试添加：

img { display: block; }
于 2013-03-01T18:53:38.997 回答
2

问题是 IMG 标记具有“INLINE”的自然 DISPLAY 值。在某些情况下，这会导致图像周围出现额外的空白。

根据您的布局需求，尝试

img { display: block; }

或者

img { display:inline-block; }

如果您的图像以其他方式工作，则 inline-block 将导致最少的抖动。

更多信息： http ://www.w3schools.com/cssref/pr_class_display.asp http://www.tequilafish.com/2009/04/29/css-removing-extra-space-underneath-an-image/

于 2013-03-01T18:58:31.353 回答
1

我认为更好的解决方案是使用

img { vertical-align: middle; }

这样您就不会交替显示默认浏览器图像。另外，确保图像容器的 line-height: 100%，这也可能导致问题。

于 2013-03-01T19:00:49.227 回答
0

默认情况下，图像具有display:inline;，这就是导致图像之间出现空白的原因。你可以做三件事来防止这种情况：

float:left;

或者

display:inline-block;

或者

display:block;
于 2013-03-01T19:21:56.677 回答