html - 将图像定位在中心正方形并用颜色填充剩余空间

Question

我想将图像放置在中心正方形中并用颜色填充剩余空间。但是使用下面的代码，我的图像在顶部，文本“测试”在图像的正下方。我希望文本位于 120x120 正方形之外。

我尝试了下面的代码:

CSS(包含在头部):

.img-container {
    width: 120px;
    height: 120px;
    display: inline-block;
    overflow: hidden;
    background-color:#000;
}
.img-container img {
    width: 100%;
    height: 100%;
}

HTML:

<a class="img-container" href="http://google.com"><img src="http://couponcoupon.biz/image/logo/landmsupply.com.jpg" /> Test </a>

Answer 1

看这篇文章:http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/它对绝对中心有很大的分割:

.Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

适用于您的示例的 fiddle :http://jsfiddle.net/bhlaird/XgNXa/我还向下移动了带有负底部的文本:设置。我对此并不狂热，我会在 img-container a 周围添加一个包装器 div 以在其下方放置文本，但我不想过多地更改您的标记。

.img-container span {
    position:absolute;
    bottom: -20px;
    left:0;right:0;
}