0

を中心としたリンクされた画像がいくつかありdivます。最後の画像の後に、テキスト リンクを追加します。何らかの理由で、リンクは画像を囲んでおらず、画像の下に配置されています。つまり、最後のテキスト リンクは前のリンクと一致しており、画像自体の下にあります。私が望むのは、テキストリンクが少なくとも画像と一致することです。

JSFiddle をチェックしてください: http://jsfiddle.net/RFzMv/

画像の周りにリンクがある場合float、それらは画像と同じサイズであり、すべてが期待どおりに機能しますが、画像は master の中央に配置されませんdiv。画像の数はサイズと同様に変更される可能性があるため、絶対値などを使用して設定することはできません。

を使用せずにリンクを囲む画像と同じサイズと位置にリンクを取得するにはどうすればよいfloatので、次のリンクは画像と一致していますか?

4

2 に答える 2

2

HTML は、3 番目の子 div を除いて、あなたのものとほぼ同じです。テキストを<span>div でラップすると、それがa.imageCountリンクに含まれます。

<div class="centered"> 
    <a class="image-link" href="">
        <img src="http://placekitten.com/100/100" width="100" height="100" />
    </a>

    <a class="image-link" href="">
        <img src="http://placekitten.com/110/110" width="100" height="100" />
    </a>

    <a href="#photos" class="imageCount">
        <span>some text</span>
    </a>
</div>

CSS は次のようになります。

.centered {
    width: 500px;
    height: 300px;
    background-color: #EEE;
    text-align: center;
}
a {
    text-decoration: none;
    outline: 1px dotted blue;  /* optional to show content boxes */
}
.image-link {
    display: inline-block;
    vertical-align: bottom; /* try out: bottom, middle, top */
}
.image-link img {
    vertical-align: bottom; /* get rid of small white space below images */
}
.imageCount {
    display: inline-block;
    border: 1px solid blue;  
    padding: 5px;
    border-radius: 5px;
    background-color: lightgray;
    margin-left: 10px;
}
.imageCount span {
    /* in case you need to style the text in a special way */
}

デモ フィドルはhttp://jsfiddle.net/audetwebdesign/uBVHC/で見ることができます。

仕組み

基本的に、 にはインライン ブロックの子要素が 3 つdiv.centeredあるため、テキストの配置は期待どおりに機能します。

画像の 1 つが行の中で最も高い要素になり、 の配置をある程度制御したいと思いますa.imageCount。

vertical-alignプロパティをに適用する.image-linkと、画像が要素に対して垂直方向にどのように配置されるかが決まりますa.imageCount。3 つの主要な値 (上、中、下) を試して、必要なデザインに適した値を選択できます。

上 (または下) の位置を調整したい場合は、単に上 (または下) マージンを使用.imageCountしdisplay: top (or bottom)ます.image-link。

の左マージンで水平方向の間隔を調整できます.imageCount。

于 2013-06-08T23:41:10.917 に答える
2

相対位置のコンテナ div がある場合は、ウィンドウ全体ではなく、含まれている div に対して相対的に配置された絶対位置の div をその中に配置できます。

これにより、画像を中央に配置したまま、リンクを好きな場所に配置できます。

#centered { position: relative; width: 500px; height: 300px; background-color: #EEE; text-align: center; }
.link-that-you-want-to-be-inline { position:absolute;margin-top:50px; }

ここにフィドルがあります：http://jsfiddle.net/RFzMv/39/

于 2013-06-08T20:04:26.527 に答える