[英]clickable div with image centered vertically and horizontally
I need to create a clickable div with an image (of variable size, but that is smaller than the div) centered both horizontally and vertically within the div. 我需要创建一个可点击的div,其图像(大小可变,但小于div)在div中水平和垂直居中。
I made the div clickable with 我使div可点击
#image-box a { display: block; height: 100%; width: 100%; }
but can't seem to center the image vertically. 但似乎无法使图像垂直居中。
Try this adjusting width and height of your a element as explained in the comments: 尝试按照注释中的说明调整元素的宽度和高度:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Centered Clickable Image</title>
<style type="text/css" media="screen">
#image-box {
position:absolute;
top:0; bottom:0; left:0; right:0;
margin:auto;
border: 1px solid #999;
text-align: center;
}
#image-box a {display:block; position:absolute;
top:0; bottom:0; left:0; right:0;
margin:auto; text-align: center;
}
/* insert the same width and height of your-nice-img.png */
#image-box a {width:339px; height:472px; border: 2px solid red;}
</style>
</head>
<body>
<div id="image-box">
<a href="#">
<img src="your-nice-image.png" alt="image to center"/>
</a>
</div>
</body>
</html>
NOTES: Borders are needed only for visual debug, You can delete them at any time. 注意:仅对于视觉调试才需要边框,您可以随时删除它们。
The trick here is that you use an absolute positioned div ( #image-box
) with a fixed width and height. 这里的窍门是,您使用具有固定宽度和高度的绝对定位的div( #image-box
)。
If you set the #image-box a
top and bottom position to zero the rule margin:auto
puts #image-box a
element in a middle position (on the vertical axis) because it has a fixed height, . 如果将#image-box a
顶部和底部位置设置为零,则规则margin:auto
将#image-box a
元素固定在中间位置(在垂直轴上),因为该元素的高度固定。
If you can or like to solve It using jQuery, try this: 如果您可以或喜欢使用jQuery解决问题,请尝试以下操作:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Centered Image</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head>
<body>
<div id="image-box">
<a href="#">
<img src="canning.png" alt="image to center"/>
</a>
</div>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(window).resize(function(){
$('#image-box a').css({
position:'absolute',
left: ($(window).width() - $('#image-box a img').outerWidth())/2,
top: ($(window).height() - $('#image-box a img').outerHeight())/2
});
});
// first run
$(window).resize();
});
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.