0

この問題にぶつかるのは初めてではなく、正しいことを理解する機会がありません。

だからここに問題があります：

私は2つの部門を持っています。それぞれにタイトルがついています。タイトルの長さによっては、タイトルが 2 行に収まらない場合もあります。これらはすべて CMS から生成されるため、特定の時点で 1 つが 2 行なのか 1 行なのかを判断する方法はありません (したがって、1 行または 2 行の場合、それらをクラスで分離することはできません)。

興味深いのは、これら 2 つの div のタイトルを垂直方向の中央に配置することです。常に 1 行または 2 行になる可能性があり、display:table-cell + vertical-align:middle は IE7 と互換性がないため、行の高さは機能しません。

これらのタイトルを垂直方向に中央揃えにする方法はありますか?それはすべてのブラウザーで機能しますか?

編集：私が説明しようとしている状況の写真を次に示します。

ここに画像の説明を入力

編集 #2: これは、私の例を再作成するコード サンプルです。両方を中心に配置したいと考えています。http://jsfiddle.net/m7bLj/

編集＃3：

@mikhailvsの回答の後、私はこのコードを思いつきました。

$(document).ready(function(){
    $(".container-div").each(function(){
        $(this).children('div').css('top', String($(this).height() / 2 - $(this).children('div').height() / 2) + 'px');
    })
})
4

1 に答える 1

1

jQuery を使用する場合は、次のようにすることができます。

var div1onLoadCallback = function () {
     var w = $(window);
     var div1 = $('#div1');
     div1.css('top', String(w.height() / 2 - div1.height() / 2) + 'px');
}

次に、divを次のように宣言します<div id="div1" onload="div1onLoadCallback()"></div>

2番目のdivについても同様です。大まかに言えば、タイトルが機能するように css 属性を変更する必要がありますposition( などposition: absolute)。

于 2012-07-09T20:26:02.400 に答える