Question

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

Answer 1

看看这篇文章：http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/ 它有一个很大的absoulte中心崩溃：

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

Answer 2

将文字换成<span>然后使用CSS移动

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

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

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

图像位于中心。如果它是动态图像（一直在变化），您将不得不尝试display:table-cell或查看一些javascript。如果图片每次都是同一张图片，您只需{im}容器内的position position:absolute，top:45px或任何中心位置。

Answer 3

首先，你的例子中有一个拼写错误

height: 100%px;

这必须是100%或100px，但不能同时为。{/ p>

您可以使用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

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

3 个答案: