css两张图片对不齐

在网页设计中，我们常常需要对几张图片进行排版，如果图片大小不同或者定位有误，就会出现两张图片对不齐的情况。这时，我们可以使用CSS进行调整，本文将介绍两种情况下的对不齐解决方法。

情况一：两张图片大小不一致

<div class="img-wrapper">
  <img src="image1.jpg" alt="图片1">
  <img src="image2.jpg" alt="图片2" class="small">
</div>

<style>
  .img-wrapper {
    display: flex;
    align-items: center;
  }
  
  .small {
    width: 50%;
  }
</style> 

在这种情况下，我们可以将两张图片放在同一个div容器里，并用flex布局中的align-items属性将他们垂直居中。同时，给第二张图片添加一个类名，然后使用CSS设置其宽度为50%即可。

情况二：两张图片定位不同

<div class="img-wrapper">
  <img src="image1.jpg" alt="图片1">
  <img src="image2.jpg" alt="图片2" class="position">
</div>

<style>
  .img-wrapper {
    position: relative;
  }
  
  .position {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style> 

在这种情况下，我们可以将两张图片放在同一个div容器里，并设置其position属性为relative。然后给第二张图片添加一个类名，在CSS中设置其position属性为absolute，再使用top、left以及transform属性进行定位即可实现两张图片的对齐。

总之，无论是哪种情况，我们都可以简单地使用CSS进行调整，实现两张图片的对齐。这也是我们在进行网页设计时必须掌握的基本技能。