流过屏幕顶部的Div

我试图显示两张地图，一张直接在另一张上面，文本位于第一张地图和第二张地图上方。每张地图都包含在centered-box中。我尝试了各种不同的参数 - body { margin:0; padding:0; }，将display: absolute添加到centered-box类，删除overflow:auto，但它们都没有工作。流过屏幕顶部的Div

我知道解决方案很简单 - 如何将这些容器放置在屏幕中心，而不是从页面流出？

此外，“文本”应该对齐框的左边缘，并且不应该溢出框的右边缘。

这里只用容器

<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%);从你的CSS在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%);

是问题。一旦你移除它，一切正确在中心对齐。如果你不想让它居中对齐删除：

align-items: center;

从身体标记。

这里有一个修正的JS小提琴： https://jsfiddle.net/h0wL50Lv/2/

来源

2017-07-19 15:22:16

流过屏幕顶部的Div

回答

相关问题