0

この質問をするのは、Chrome ブラウザでは正しく表示されますが、Firefox/IE では表示されないため、気が狂ってしまうからです。

ウィンドウに従って垂直方向と水平方向に配置する必要がある div が必要です。また、相対的なサイズもあります。手伝ってくれませんか ？私はこれを試しましたが、Chromeでしか動作しません:

    #itemNewsFS {
       position:fixed;
       display:none;
       width: 50%;
       left: 50%; 
       margin-left: -25%;
       height: 80%;
       top: 50%;
       margin-top: -40%;
    }

ありがとうございました ！

4

2 に答える 2

0

余白 (垂直と水平の両方) は、含まれているボックスの幅に対して相対的に計算されます。CSS2.1 仕様からのこの抜粋をお読みください: little link .

目的を達成するには、margin-left値を保持できますが、JavaScript を使用して修正する必要がありますmargin-top。

document.getElementById("itemNewsFS").style.marginTop = Math.floor(window.innerHeight * 40 / 100) + "px";
于 2012-10-01T11:27:35.567 に答える
0

それをやってみてください：

<div class="block">
   <div id="itemNewsFS">
       Unknown stuff to be centered.
   </div>
</div>

.block {
    text-align: center;
    background: #c0c0c0;
    border: #a0a0a0 solid 1px;
    margin: 20px;
    height: 100%; /* Put your height here */
}

.block:before {
    content: '';
    display: inline-block;
    height: 100%; 
    vertical-align: middle;
    margin-right: -0.25em; /* Adjusts for spacing */

}

#itemNewsFS {
display: inline-block;
    vertical-align: middle;
    width: 300px;
    padding: 10px 15px;
    border: #a0a0a0 solid 1px;
    background: #f5f5f5;
}​

ソース: http://css-tricks.com/centering-in-the-unknown/

于 2012-10-01T12:11:32.323 に答える