0

次のように、画面の高さいっぱいまで伸びる別の div 内に div を配置し、垂直方向に中央に配置しようとしています。

プレビュー http://f.cl.ly/items/1a3L46453f0D271V1O2w/Schermafbeelding%202013-04-02%20om%2021.37.25.png

大きな写真は全画面の div で、白い帯は垂直方向の中央の div です。以下のソリューションは、私が試した可能性のあるすべてのコンピューターとブラウザーで正常に動作します... Mobile Safari を除く. 何らかの理由で、Mobile Safari (少なくとも iPad では) は、ネストされた div を親 div の 50% 下ではなく、ページの 50% 下に配置することを決定します。

HTML:

<div class="band full">
    <div class="band">
        *content*
    </div>
</div>

SCSS (無関係なタグを削除):

div.band{ //General styling for div.band elements
    margin: 0px;
    padding: 80px 0px;
    width: 100%;

    &.full{ //Style the parent div
        height: 100%;
    }

    div.band{ //Style the nested div
        position: relative;
        top: 50%;
        margin-top: -200px;
        padding: 20px 0px;
        height: 400px;
    }
}

これは Mobile Safari のバグではないかと、しつこく感じています。そうでないことを願っています。これを修正する方法を知っている人はいますか？

4

2 に答える 2

0

これをチェックしてください。モバイルではテストされていませんが、動作するはずです

HTML

<div class="panel">
 <div class="panelInner">
  <div class="box">
   <div class="boxInner">hi there</div>
  </div>
 </div>
</div>

CSS

html {
min-height: 100%;
height: 100%;
}

body {
height: 100%;
margin: 0;
}

.panelInner {
padding: 40px;
text-align: center;
display: table-cell;
vertical-align: middle;
}

.box {
height: 200px;
background: #999;
display: table;
width: 100%;
}

.boxInner {
display: table-cell;
vertical-align: middle;
}

そして、ここにフィドルがあります

于 2013-04-03T00:08:12.903 に答える