1

images_box幅が。というdivがあり277pxます。そのdiv内には、<a>タグとして保存されている9つの画像があります。画像は左に浮き、div内で非常にうまく整列していますが、縦向きのものと横向きのものがあるため、画像を垂直方向に揃えたいと思います。各画像をdivで囲むとこれができることはわかっていますが、ギャラリーを起動するために使用するプラグインは、どの画像が起動されているかを認識しないため、<a>タグ内で囲む必要があります。

これは私が持っているコードです。誰かが画像を水平方向と垂直方向に揃えるのを手伝ってくれるなら。画像が歪んでほしくない。

#images_box a {
    float: left;
    padding: 9px;
    width: 70px;
    height: 70px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

私のデータ

<div id="images_box">
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_b.jpg" title="morning after[explored] (mariosworld343)">
        <img src="http://farm8.staticflickr.com/7069/7060779347_fbee5aae15_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7234/7047458501_46a2203733_b.jpg" title="Self confined... (TVidhya)">
        <img src="http://farm8.staticflickr.com/7234/7047458501_46a2203733_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7053/6918451990_20fa76f338_b.jpg" title="kleiner schrittmacher (KatjaGiersig)">
        <img src="http://farm8.staticflickr.com/7053/6918451990_20fa76f338_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7121/7059981833_abe404f4a0_b.jpg" title="(caro diario.)">
        <img src="http://farm8.staticflickr.com/7121/7059981833_abe404f4a0_m.jpg" alt="" />
    </a>
</div>
4

3 に答える 3

1

私はあなたが何を望んでいるかを理解したと思います。float: left画像を並べて取得する必要はありません。

#images_box {
    background: #eee;
    overflow: hidden; /* this div will get the height of the tallest element inside it */
    white-space: nowrap; /* prevent line-breaks */
}


#images_box a {
    padding:9px;
    display: inline-block; /* required to apply vertical-align as expected */
    vertical-align: middle;
}​

で動作します:

  • Internet Explorer 6 以降
  • 最新のブラウザ

ライブデモ: http://jsfiddle.net/vjDVp/1/

于 2012-06-17T07:56:17.570 に答える
0

CSS をaタグではなく画像に設定します。それらにクラス名を付け（他の画像が影響を受けないようにするため）、質問で提供したコードをそれに適用します（img.myclass）。または、少なくともvertical-align.

また、画像のサイズは？画像が横向きか縦向きかに応じて、それらはすべて同じ幅、同じ高さ、または特定のサイズを持っていますか?

ああ、理由はわかりませんが、text-alignimg タグでも機能することがあります。

于 2012-06-16T21:34:05.697 に答える
0

基本的に、あなたが探しているようです：

#images a {
    padding: 9px;
    width: 70px;
    height: 70px;
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

vertical-align必要に応じてtotopまたはを微調整できmiddleます。フロートは必要ありません。元の質問で説明した寸法がずれているため、誤解していた場合は申し訳ありません。

display: table-cellそれが重要な場合は、IE6/7 に対応していないことにも注意してください。

于 2012-06-16T21:12:48.453 に答える