0

Web ページを 500% 拡大した後、左右のコンテンツを中央に配置したかったのですが、多くの方法を試しましたが、まだ答えがありません。

コピーして貼り付けて新しい Web ページを作成すると、fiddle に貼り付けたのか、codewall に貼り付けたのかがわかりません。

html:

<body>
    <div id="lower_body">
        <h1>center content</h1>
        <div id="outer_warpper">
           <div id="outer">
               <div id="left"><h1>left</h1></div>    
               <div id="right"><h1>right</h1></div>
           </div>
        </div>
    </div>
 </body>

CSS:

#lower-body {
    margin: 0px;
    padding: 0px;
}
#outer_warpper {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding-top: 2%;
    padding-bottom: 2%;
    background-color: yellow;
    overflow: hidden;
}
#outer {
    background-color: black;
    text-align: center;
    vertical-align: middle;
    display: table;
    margin:0px auto;
    overflow: hidden;
}
#right { 
    width: 450px;
    height: 350px;
    display: inline-block;
    vertical-align: middle;
    background-color: red;
}
#left{
    width: 450px;
    height: 350px;
    display: inline-block;
    vertical-align: middle;
    background-color: grey;
}

img{
widht:100%;
height:100%;
}

h1{
    text-align: center;
}

500% (ctrl + マウス スクロール) に達するとわかるように、左と右のテキストが中央に表示されなくなります。

私がそれを作るのを手伝ってもらえますか？助けてくれてありがとう。width:% も試してみましたが、うまくいきません。@media で行う必要があると言う人もいます。

4

2 に答える 2

0

これは正常な動作です...

2 つの div が相対的に隣り合って配置されています。それらが隣り合うものに収まらない場合、2番目のものは最初のものの下に再配置されます...

本当に500％ズームで動作させたい場合は、次のことができます：

  1. div のサイズを変更する(例)
  2. % 幅を使用する(例 2)

個人的には、2 番目の例を使用します。ただし、選択はあなた次第です（これを達成する必要がある理由に常に依存します）

PS： divで使用display:table;していたため、％幅が機能していませんでした#outer

于 2013-09-12T05:17:10.193 に答える