这是html:

<div class="gallerybox">
<a href="/CustomContentRetrieve.aspx?ID=398791">
<img alt="" src="/Utilities/image.jpg" width="400" height="400" />
</a>
</div>


这是CSS:

.gallerybox {width:200px;height:200px;overflow:hidden;}


谁能告诉我在div.gallerybox中间(垂直)和中心(水平)内对齐链接图像的方法吗?也许使用javascript,jQuery或仅使用CSS?

最佳答案

也许像下面这样:

<div class="gallerybox">
  <a href="/CustomContentRetrieve.aspx?ID=398791">
    <img id="imgUtility" class="galleryImage" alt="" src="/Utilities/ShowThumbnail.aspx?USM=1&amp;W=400&amp;H=400&amp;R=1&amp;Img={tag_image_value}" />"  />
  </a>
</div>

.gallerybox {
  width:200px;
  height:200px;
  overflow:hidden;
}

<!-- Edit Again -->
<script language="javascript">
window.onload = fixImage;

function fixImage() {
  var img = document.getElementById('imgUtility');
  var x = img.offsetWidth;
  var y = img.offsetHeight;

  img.style.left = -(x / 2);
  img.style.top = -(y / 2);
}
</script>

07-24 09:46
查看更多