1

例: http://jsfiddle.net/S23ut/1/

画像とテキストをコンテナーの中央に垂直に揃えたいと思います。私はこれに適切なCSSを取得できないようです。アイデア/トリックはありますか？

4

3 に答える 3

1

ブラウザ間の互換性についてはわかりませんが、CSS を使用するとdisplay: table-XXXうまくいく可能性があります。

#offer_widget .row {
    display: table-row;
}

#offer_widget .row_image {
    display: table-cell;
    text-align:center;
    vertical-align: middle;
}
#offer_widget .row_text {
    display: table-cell;
    vertical-align: middle;
}

jsFiddle へのこの更新を参照してください。

于 2012-04-23T05:39:39.877 に答える
0

2つのネストされたdivで以下のcssスタイルを使用します。

display:table
display:table-cell

例えば。

<html>
<head>
    <style>
        #outer{width:100px; height:60px; border:solid 1px #f00;display:table;}
        #inner{display:table-cell; vertical-align:middle;text-align:center;font-size:16px;}
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner">test</div>
    </div>
</body>
</html>
于 2012-04-23T05:47:39.010 に答える
0

フロートを削除して、表示テーブルのプロパティをライブデモhttp://jsfiddle.net/rohitazad/S23ut/5/にします

于 2012-04-23T05:40:22.317 に答える