javascript - 在页面中居中放置一个 div，但它出现在页面底部

Question

我尝试将 HTML 页面设置为如下所示:

(我认为不需要边框)

但我做到了:

Here is my jsFiddle

是否有更用户体验明智的安排来获取带有图例、标题和相关单选框的 map ？

有没有更优雅的方式来重写我的CSS？我看到很少有人指向 display: table 来使某些 div 居中。

我该如何执行以下操作？

• 使标题 div 更短
• 使整个容器位于页面中间 - 垂直和水平

这是我的 CSS:

    #container {
      height: 600px;
      width: 1100px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }

#header {
  padding: 50px;
  background: #93c4d3;
  overflow: hidden;
}

#headerImg,
#headerTitle {
  float: left;
  padding-left: 60px;
}

#map {
  height: 600px;
  width: 1100px;
}

div.lowerSection {
  overflow: hidden;
}

#radioDiv,
#legend {
  float: left;
}

#radioDiv {
  padding-left: 60px;
}

#legend {
  float: right;
  width: 200px;
  height: 100px;
  border: 5px solid cyan;
}

这是我的 HTML:

<div id="container">
    <div id="header">

        <img id="headerImg" src="images/marker-icon-2x.png">
        <h1 id="headerTitle"> My Title </h1>

    </div>

    <div id="map"></div>
    <div id="lowerSection">
        <div id="radioDiv">
            <select name="dropdown" size=1>
                <option value="-1">none</option>
                <option value="0">1st alternative</option>
                <option value="1">2nd alternative</option>
                <option value="2">3rd alternative</option>
                <option value="3">4th alternative</option>
            </select>
            <br/>
            <br/>

            <input id="startRadio" type="radio" name="marker" value="0" checked="checked"> start
            <input id="marker_0" type="text">
            <br/>
            <br/>
            <input id="endRadio" type="radio" name="marker" value="1"> end
            <input id="marker_1" type="text">
            <br/>
            <br/>
            <button id="compare_btn" type="button">Beta vs. Prod</button>
        </div>

        <div id="legend">
            <h3>legend:</h3>
        </div>
    </div>

</div>

<script src="js/jquery.min.js"></script>
<!-- <script type="text/javascript" src="routes.js"></script>-->
<script src="js/leaflet.js"></script>
<script type="text/javascript" src="js/beta_map.js"></script>

Answer 1

对于 header div，你可以在 css 中固定它的高度吗

header{ height:fixed value;}