位置圖像在中心廣場，並用顏色填充剩餘空間

我想將圖像放置到中心廣場並用顏色填充剩餘空間。儘管下面的代碼，我的圖像是在頂部和文本「測試」正好在圖像下面。我希望文字在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>

來源

2013-09-24 Anisha Virat

您可以創建一個圖片，看你想要什麼？ –

看看這篇文章：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上添加一個包裝div來讓它下面的文本，但我不想更改標記太多。

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

來源

2013-09-24 16:22:29

完美:)謝謝 –

包裝你的文字在<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或中心位置。

來源

2013-09-24 16:17:33 ntgCleaner

首先，有一個在你的榜樣

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-24 16:32:49

位置圖像在中心廣場，並用顏色填充剩餘空間

回答

相關問題