Divが画面の上を流れる

最初のマップと2番目のマップの上にテキストが配置された2つのマップを直接重ねて表示しようとしています。各マップはcentered-boxに含まれています。私はbody { margin:0; padding:0; }のさまざまなパラメータを試しましたが、centered-boxクラスにdisplay: absoluteを追加し、overflow:autoを削除しましたが、どれも動作しません。Divが画面の上を流れる

私は解決策が簡単だと理解します。これらのコンテナを画面の中央に配置し、ページから流出しないようにするにはどうすればよいですか？

さらに、「TEXT」はボックスの左端に揃えられ、ボックスの右端にオーバーフローしないようにしてください。ここで

はちょうどコンテナあなたのCSSから

<style> 
    body {display: flex; 
    /* Specify direction where all items will */ 
    flex-direction: column; 
    /* Center all items in this direction */ 
    align-items: center;} 

     #map { 
      width:50%; 
      overflow: auto;} 

     #map2 { 
      width:50%; 
      overflow: auto;} 

     .text{ 
      color:#282828; font-family:Arial; font-weight:200; 
     } 
     .centered-box { 
      left: 25%; 
      top: 50%; 
      transform: translate(-50%, -50%); 
      width: 250px; 
      height: 250px; 
      align-content: center; 
      border: 1px solid red; 
      overflow: scroll; 
     } 


</style> 
</head> 
<body> 
<style> 


button { 
    position: fixed; 
    margin: 5px; 
    right: 0px; 
    z-index: 1010101010 
} 

#pause::after { 
    content: 'Pause'; 
} 

#pause.pause::after { 
    content: 'Play'; 
} 

</style> 

    <div class="text">TEXT</div> 
    <div class="centered-box" id="map"> 
    <button id="pause"></button> 
</div> 
    <div class="text">TEXT</div> 
    <div class="centered-box" id="map2"> 
    <button id="pause"></button> 
    </div>

出典

2017-07-19 the_darkside

削除transform: translate(-50%, -50%);とJS fiddleでは一例であり、そこにあなたはそれを持っています。

#container { 
 
    display: flex; 
 
    /* Specify direction where all items will */ 
 
    flex-direction: column; 
 
    /* Center all items in this direction */ 
 
    align-items: center; 
 
} 
 

 
#map { 
 
    overflow: auto; 
 
} 
 
#map2 { 
 
    overflow: auto; 
 
} 
 
.text{ 
 
    color:#282828; 
 
    font-family:Arial; 
 
    font-weight:200; 
 
} 
 
.centered-box { 
 
    width: 250px; 
 
    height: 250px; 
 
    align-content: center; 
 
    border: 1px solid red; 
 
    overflow: scroll; 
 
} 
 

 
button { 
 
    position: fixed; 
 
    margin: 5px; 
 
    right: 0px; 
 
    z-index: 1010101010 
 
} 
 

 
#pause::after { 
 
    content: 'Pause'; 
 
} 
 

 
#pause.pause::after { 
 
    content: 'Play'; 
 
}

<body> 
 
    <div id="container"> 
 
    <div> 
 
     <p class="text">TEXT</p> 
 
     <div class="centered-box" id="map2"> 
 
     <button id="pause"></button> 
 
     </div> 
 
    </div> 
 
    <div> 
 
     <p class="text">TEXT</p> 
 
     <div class="centered-box" id="map2"> 
 
     <button id="pause"></button> 
 
     </div> 
 
    </div> 
 
    
 
    </div> 
 
</body>

出典

2017-07-19 15:15:33

あなたが微調整を必要とする、または私はあなたが必要なものを誤解している場合は、私に知らせてください:)私はあなたのボタンのような感覚は、あなたが希望する方法を動作していない持っていますそれらがページに固定されているので、それらを欲しい。（画面の幅と高さを減らしてスクロールしてみてください） –

はい、これは機能します！ TEXTはボックスの左端に合わせる必要がありますが、ボックスの右端にオーバーフローしないようにしてください。意味がありますか？ –

@the_darksideこれはあなたが必要とするものですか？ –

ライン：

transform: translate(-50%, -50%);

が問題でした。それを取り除くとすぐに、すべてが中央で正しく整列します。 bodyタグから

align-items: center;

：あなたはそれが整列削除を中央にしたくない場合。ここで

は改正JSフィドルある： https://jsfiddle.net/h0wL50Lv/2/

出典

2017-07-19 15:22:16

答えて

関連する問題