Question

我试图将世界地图置于一个全宽度和全高度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居中？

Answer 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

e.g。

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

Working sample

<强>更新

设置height 100%需要您的父容器设置高度，因为您使用的是%，但在这种情况下body您没有设置任何高度。因此，要将height: 100%设置为html和body元素。

html，body { 身高：100％ }

Working code

如何将Datamaps世界地图置于两个div

1 个答案: