中心锚与图像在div [英] Center anchor with image in div
本文介绍了中心锚与图像在div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个锚点元素中的图片。
我希望锚点图片在父div中垂直和水平居中。
I have an image that's in an anchor element.
I want the anchor an the image to be centered both vertically and horizontally in the parent div.
Here's an example:
<div class="wrapper">
<a href="#" class="anchor">
<img src="http://bit.ly/1mFH8AW"></img>
</a>
</div>
.wrapper {
background: black;
width: 500px;
height: 500px;
}
.anchor {
}
.anchor > img {
height: 100px;
width: 100px;
}
Result:
解决方案
Add position:relative
to your wrapper and then change the image's CSS to:
.anchor > img {
height: 100px;
width: 100px;
position:absolute;
margin:auto;
top:0;right:0;bottom:0;left:0;
}
这篇关于中心锚与图像在div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文