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 タグの本来の DISPLAY 値が「INLINE」であることです。これにより、特定の状況で画像の周りに余分な空白が表示されます。

レイアウトのニーズに応じて、試してください

img { display: block; }

また

img { display: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;デフォルトであり、それが画像間の空白の原因です。これを防ぐために、次の 3 つのことを行うことができます。

float:left;

また

display:inline-block;

また

display:block;
于 2013-03-01T19:21:56.677 に答える