中心頁面一個div，但它出現在頁面的底部

我嘗試設置一個HTML頁面是這樣的：中心頁面一個div，但它出現在頁面的底部

（在我看來沒有必要邊框）

但我得到這個：

Here is my jsFiddle

是否有更多的UX wize arragment來獲取帶有圖例，標題和相關廣播框的地圖？

有沒有更優雅的方式來重新寫我的CSS？我看到有幾個人指着display: table來集中一些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>

來源

2016-02-28 Elad Benda

如果您可以發佈單獨的問題而不是將問題組合成一個問題，那麼這是首選。這樣，它可以幫助人們回答你的問題，也可以幫助其他人至少狩獵你的一個問題。謝謝！ –

至於你真正的標題問題 - http://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally?rq=1我是在發佈這樣一個很糟糕的問題之前，你還沒有更多地搜索過你的名譽。 –

*「讓標題div更短」*？你可以爲你的標題使用固定的「高度」，或者減少其子項的填充/邊距和字體大小。請注意，默認情況下'h1'具有'user agent'樣式，它由瀏覽器應用。 – Aziz

爲頭格，你怎麼樣只是固定它的高度在CSS

header{ height:fixed value;}

來源

2016-02-28 12:13:21

頭可以給出一個固定的高度

#header{ height:60px;}

大約爲中心的整個容器..

這應該集裝箱中心： -

#container { 
     height: 600px; 
     width: 1100px; 
     position: absolute; 
     top: 50%; 
     bottom: 0; 
     left: 50%; 
     right: 0; 
     margin-top: -300px; 
     margin-left: -550px; 
    }

未測試..但我認爲應該工作

來源

2016-02-28 12:33:51

因爲你有在你的頭部填充只是刪除它，它會縮短..容器只是玩高度和寬度（也有裕量：自動和將容器放置在屏幕中間）放在CSS的#container {}中，您應該找到自己的偏好。簡單:)

來源

2016-02-28 12:42:00 Thanagor

中心頁面一個div，但它出現在頁面的底部

回答

相關問題