javascript - CSSでの垂直方向の配置？

Question

vertical-align: middle;だから私は、CSSで要素を垂直方向に整列させるために人々が使用した問題とさまざまな方法についてすべて知っています。しかし、私はそれが機能するために必要なもののために機能するものを見つけていません。

基本的に、私のページには1つだけ<div>あり、水平方向と垂直方向の両方でページの中央に配置します。横の部分はもちろん簡単ですが、縦の部分に引っ掛かっています。私の問題は、の高さ<div>が不明であるということです。内容が変わるので高さを指定できません。

誰かが私のためのヒントがありますか？必要に応じてJavaScriptを使用します。ありがとう！

score 3 · Accepted Answer

ただし、 Javascriptを使用すると、単一のdivでそれを行うことができます。

score 0 · Accepted Answer

あなたがJSを使用してもかまわないと言ったように、ここにあります...（私は通常、JSソリューションにフォールバックすることはありませんが、それでかっこいいなら、私もそうです）

CSSが

#element {
    position: absolute;
    top: 50%;
}

次に、私の友人のjQueryを使用できます

$(document).ready(function() {
    var height = $('#element').height();
    $('#element').css({marginTop: '-' + (height / 2) + 'px'})

{);

これはテストされていませんが、開始する必要があることに注意してください。うまくいけば、高さ/ 2は期待どおりに機能しますが、そうでない場合は、parseInt();を使用してみてください。

2 に答える 2