1

画像を中央の正方形に配置し、残りのスペースを色で塗りつぶしたいと考えています。ただし、以下のコードでは、私の画像が上にあり、「テスト」というテキストが画像のすぐ下にあります。テキストを 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/ 絶対中心の大きな内訳があります:

.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

テキストを で囲み、<span>CSS を使用して移動します

を設定して削除したことを確認して.img-containerから、これを行いますposition:relative;overflow:hidden;

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

テキストは好きな場所に配置されます。

画像は中央にあります。動的な画像 (常に変化する) の場合は、display:table-celljavascript を試すか調べる必要があります。画像が毎回同じである場合は、positionimg-container 内にposition:absolute,top:45pxまたは中心がある場所ならどこにでも入れることができます。

于 2013-09-24T16:17:33.803 に答える