中心锚形象DIV [英] Center anchor with image in 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.

这里的一个例子：

<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;
}

结果：

推荐答案

添加的位置是：相对来您的包装，然后将图像的CSS更改为：

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;
}

的jsfiddle例如

jsFiddle example

这篇关于中心锚形象DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！