0

わかりました、これについて多くの質問があることは知っていますが、それらは重複していると思われますが、正直なところ、私はそれらの多くを読みました。それぞれに特定のケース/マークアップがあります-それでも正しく理解できません...

ウィジェット領域に長いテキストを含む小さな画像があります。中央揃えにする必要があり、テキストが画像よりも高い場合は、中央に揃える必要があります（画像よりも「高い」場合でも）-

フィドルはこちら: http://jsfiddle.net/as8xW/

ユニバーサル ソリューション クロス ブラウザを探しており、テーブルはありません

編集私

回答の更新後-ハックの可能性につまずいて修正しました（jQuery）

このスクリプトが実際に行うことは、問題のある要素をテーブル マークアップでラップすることです。つまり、それらを IE の実際のテーブルに変換します。

だから私たちが持っていると仮定して

.table     { display: table; }
.trow  { display: table-row; }
.tcell { display: table-cell; }

私たちは:

$(document).ready(function(){
  if ($.browser.msie && $.browser.version == 7)
  {
    $(".tcell").wrap("<td />");
    $(".trow").wrap("<tr />");
    $(".table").wrapInner("<table />");
  }
});

上記のスクリプトをbiziclopが提供するソリューションに配置すると、テストで機能します...

編集Ⅱ

@biziclop ソリューション VR2 は完全に機能するため、編集 I が廃止されます (または、少なくとも必要ありません)。

4

2 に答える 2

1

V1：テーブルセルを使用

http://jsfiddle.net/as8xW/4/

を使用するtable-cellには、ラッパーを配置する必要がspanありました。これは、他のセルに合わせて画像サイズを変更することimgさえできないためです。table-cell

li: table-row
  span: table-cell, vertical-align:middle
    img
  a:   table-cell, vertical-align:middle

V2：インラインブロックを使用し、幅が固定されており、IE6で動作します

http://jsfiddle.net/as8xW/10/

li: block: FIXED WIDTH
  span: inline block (with IE treatment)
    img
  a:    inline block with FIXED WIDTH not to drop below the image
于 2012-06-23T07:36:18.437 に答える
0

あなたはこれを試すことができます

html:

<div class="sidebar-box">
    <ul>
        <li>
            <div class="left-col">
                <img src="http://placehold.it/50x50" height="50" width="50">
            </div>
            <div class="right-col">
                <a href="http://localhost/wp-sandbox/?p=283" title="Results Photography">
                    Results Photography Results Photography Results Photography Results Photography Results Photography Results Photography Results Photography Results Photography Results Photography 
                </a> 
            </div>
        </li>
    </ul>
</div>

CSS

.sidebar-box {
    margin-bottom: 20px;
    float: left;
    width: 45%;
}

.sidebar-box img {
}

.sidebar-box li {
    margin: 0;
    display: block;
    overflow: hidden;
    zoom: 1;

}

.left-col {
    display: table-cell;
    vertical-align: middle;
    _float: left;
    *float: left;
    width: 65px;
    *margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0" :(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) +'px');
}
.right-col {
    display: table-cell;
    vertical-align: middle;
    _float: left;
    *float: left;
    *margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0" :(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) +'px'); 
}

フィドル リンクhttp://jsfiddle.net/cKmQ9/しかし、フィドルの IE6 の原因でバグが発生する可能性があります。新しいドキュメントで試してみてください。

于 2012-06-23T08:45:26.010 に答える