1

動的な高さのブロックを中央に配置しようとしています。私は Vanseo Design の素晴らしいガイドに従い、負のマージンでソリューションを実装しました。しばらく微調整した後、Chrome で動作するようになりましたが、IE と Firefox で試してみると、負のマージンがかなりずれていました! Chrome と Safari は期待どおりに位置を処理しますが、IE と FF はそうではありません。IEだけだったら、古典的なIE-CSSハックを行うことができたかもしれませんが、Firefoxも混在しています...すべてのブラウザで動作するように動的要素を使用して垂直中心を取得する方法を知っている人はいますか?

Chrome / Safari からのスクリーンショット (正しい):

Firefox / IE のスクリーンショット (間違っています):

<!DOCTYPE html>
<html>
<head>
<title>Dead Centre</title>

<style type="text/css" media="screen"><!--
body 
    {
    color: white;
    background-color: #000;
    margin: 0px
}

#content
{    
    position: absolute;
    top: 50%;
    left: 0%;
    height: 64%;
    width: 100%;
    margin-top: -32%;
    text-align:center;
    background-color:#339;
}

--></style>
</head>

<body>
    <div id="content">
        <div class="bodytext">This box should be centered vertically</div>
    </div>
</body>
</html>
4

1 に答える 1

1

さて、要素の高さを 64% に設定したので、mats を実行しましょう :) 100-68 = 36 ..、つまり 36% しか残っていません。

これを2で割ると18になります

コンテンツ ID を上から 18% に配置し、余白を取り除くことで、すべてがうまく機能するはずです。:)

#content
{    
    position: absolute;
    top: 18%;
    left: 0%;
    height: 64%;
    width: 100%;
    text-align:center;
    background-color:#339;
}
于 2012-09-19T13:08:20.603 に答える