这是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&W=400&H=400&R=1&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>