css 中的地图和文字

Question

我是 CSS 的新手，但目标相对简单。我的 objective 是格式化网页以显示一系列地图，中间有文本。最终布局如下，页面可滚动：

text
map
text
map
text
map

文本和地图都应居中。为了将地图放在页面中央，我将每个 map 附加到 map-container，但我不确定这是正确的方法。以下降价与地图重叠，不允许向下滚动页面。

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8' />
    <title></title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'></script>
    <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body { margin:0; padding:0; }
        #map { 
          position:absolute; 
          top:50%; bottom:0; 
          width:100%;
          height:50%; 
          overflow: auto;}

        #map2 { 
          position:fixed; 
          top:75%; 
          bottom:0; 
          width:100%; 
          height:50%; 
          overflow: auto;}

        #map-container {
          overflow: scroll;
          position: absolute;
          height: 500px;
          width: 500px;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          transform: -webkit-translate(-50%, -50%);
          transform: -moz-translate(-50%, -50%);
          transform: -ms-translate(-50%, -50%);
        }

</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 id='map-container'><div style="position:absolute; color:#282828; font-family:Arial; font-weight:200;"><br><b>TEST  </b></br>
</div>
<div id='map'>
<button id='pause'></button>
</div>
<div id='map2'></div>
</div>

<script src="script.js"></script>
</body>
</html>

两个地图都是同一父元素的子元素。我尝试更改位置参数，更改 top/bottom 尽管没有任何效果 - 一张地图覆盖另一张地图或它们重叠。我究竟做错了什么？关于如何在文本之间放置地图的任何建议或基本模板都会非常有帮助。

Answer 1

使用此代码，您的所有内容都在中心

<style>
    body { margin:0; padding:0; }
    #map { 
      width:100%;
      height:50%; 
      overflow: auto;}

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

    .text{
        color:#282828; font-family:Arial; font-weight:200;
    }
#map-container{
            text-align: center;
        }

<body>

<div id='map-container'>
    <div class="text">TEXT</div>
    <div id='map'></div>
    <div class="text">TEXT</div>
    <div id='map2'></div>
    <div class="text">TEXT</div>
</div>

<script src="script.js"></script>
</body>

Answer 2

您可以通过 flexbox 实现这一点。不需要额外的容器。演示：

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

Look how many maps we've got!
<img src="https://i.stack.imgur.com/YoxkJ.jpg" />
Some text
<img src="https://i.stack.imgur.com/70PBD.jpg" />
This is also text
<img src="https://i.stack.imgur.com/C8Kaj.jpg" />
Maps are awesome

css 中的地图和文字

Maps and text in css

html

css

mapbox