將圖像放置在中心方框中，並用顏色填充剩余空間

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-horizo​​ntal-vertical-centering-css/它具有絕對中心的重大故障：

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

在您的示例中使用了一個小提琴： http : //jsfiddle.net/bhlaird/XgNXa/我也將文本向下移至負負設置：。 我對此並不感到困惑，我會在img容器a周圍添加一個wrapper 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。 如果圖像每次都相同，則可以position其放置在img容器內， position:absolute ， top:45px或中心位置。

Answer 3

首先，您的示例中有一個錯字

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