1

我想将图像定位到中心正方形并用颜色填充剩余空间。但是，使用下面的代码，我的图像在顶部，文本“test”就在图像的正下方。我希望文本位于 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>
4

3 回答 3

1

看这篇文章：http ://coding.smashingmagazine.com/2013/08/09/absolute-horizo​​​​ntal-vertical-centering-css/ 它对absolte中心有很大的细分：

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

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

.img-container span {
    position:absolute;
    bottom: -20px;
    left:0;right:0;
}
于 2013-09-24T16:22:29.460 回答
0

首先，您的示例中有一个错字

height: 100%px;

这必须是100%或100px，但不能同时是两者。

您可以使用background-image和background-position使图像居中

CSS： 

.img-container {
    width: 120px;
    height: 120px;
    display: inline-block;
    background-image: url(http://couponcoupon.biz/image/logo/landmsupply.com.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-color:#000;
}

要将文本移动到正方形下方，请删除文本overflow: hidden并将其添加margin到文本周围的包装器中

HTML： 

<a class="img-container" href="http://google.com">
    <div class="center">Test</div>
</a>

CSS： 

.img-container .center {
    margin: 120px 45px;
}

完整的 JSFiddle

于 2013-09-24T16:32:49.603 回答
0

将您的文本包裹在一个<span>然后使用 CSS 来移动它

确保您.img-container已position:relative;设置和删除overflow:hidden;，然后执行此操作

.img-container span {
    position:absolute;
    left:125px;

您的文本将在您想要的任何地方。

至于图像在中心。如果它是动态图像（一直在变化），您将不得不尝试display:table-cell或查看一些 javascript。如果图像每次都相同，则可以position将其放在 img-container 中position:absolute，top:45px或者 center 所在的任何位置。

于 2013-09-24T16:17:33.803 回答