0

我试图以全宽和全高 div 居中世界地图，但它不断溢出 div（查看小提琴：http: //jsbin.com/bifugahapa/edit ?html,output ）

这是我用来将另一个 div 中的一个 div 居中以将其绘制在一个较小的 div 上的代码，因此即使它确实溢出它也不会产生滚动条：

<div id="container1" style="
                           position: relative; 
                           width: 100%; 
                           height:95%; 
                           background-color: darkblue; 
                           padding-top: 40px">
     <div id="datamap" style="
        display: table-cell;
        vertical-align: middle;
        margin: 0 auto;
        max-height: 500px;
        height: 95%;
        width: 95%;
        background-color: black
        ">
     </div>
</div>

有什么方法可以缩放世界地图或将内部 div 居中？

4

1 回答 1

1

如果我理解正确，您可以display:table-cell改为display: block改为。

  #data-map {
    display: block;
    vertical-align: middle;
    margin: 0 auto;
    max-height: 500px;
    height: 95%;
    width: 95%;
    background-color: black
  }

更新：

要使其垂直居中，您可以使用position: absolute

例如

  #data-map {
    display: block;
    vertical-align: middle;
    margin: 0 auto;
    background-color: black;
    position: absolute;
    top: 5%;
    bottom: 5%;
    left: 5%;
    right: 5%;
  }

工作样本

更新：

设置height 100%需要您的父容器设置高度，因为您正在使用%，但在这种情况下，body您没有设置任何高度。height: 100%所以要修复那个集合html和body元素。

html，正文 { 高度：100% }

工作代码

于 2015-10-22T20:10:19.227 回答