0

問題

画像をテキストの横に中央揃えにしたい.テキストの量は各ボックスで異なるため、高さを設定することはできません.私が研究しているように、人々は主に2つの垂直方向の中央揃え方法を使用しています.高さが固定されていないため、使用しないでください。2つ目は、使用できない絶対配置を使用しています。これは、内部に画像がある左のdivがテキストを覆うためです。パディングをテキストに設定すると、画像がそこにない場合よく見えません。

私が考えることができる最善の方法は、jQuery を使用してコンテナーの高さを取得および設定し、高さに応じて余白を設定することです。

<div class="container">
        <div class="image_holder">
            <img src="http://blog.oxforddictionaries.com/wpcms/wp-content/uploads/cat-160x160.jpg" alt="cat" />
        </div>

        <p>text</p>
    </div>

    <style type="text/css">
        .container {
            width:600px;
            overflow:hidden; }
        .image_holder {
            width:100px;
            height:100%;
            float:left;
            background:#eaf0ff; }
        p {
            width:500px;
            float:left; }
    </style>

    <script>

        $('.container').css('height', $('.container').height() );

        $('.image_holder').css('margin-top', ( $('.container').height() - $('.image_holder img').height() ) / 2 );

    </script>

純粋な CSS できれいに行う方法はありますか?

4

1 に答える 1

0

私が思いついた最善の解決策は、ボックス内に画像を絶対に配置し、ボックス内に画像がない場合は javascript を使用してパディングを削除することです。

于 2012-06-26T13:30:44.367 に答える