0

我有一个 html 页面，里面有一些 div 标签，我想把我的容器 div放在电脑屏幕的中心，无论我放大还是缩小。

我想以这样的方式修改我的 html 页面www.bing.com。缩小时主页在屏幕上居中，而我的网页在缩放时会不断扩展。

我的 HTML 页面代码：

 <html>
      <head>
        <title>
          HTML test page
        </title>
        <style>
          .horizontal{
        width:100%;
        height:100px;
        background-color: #bbb;
          }
          .vertical{
        width:100px;
        height:70%;
        background-color: #bbb;
          }
          #container{
        margin:auto;
        width:100%;
        height:100%;
          }
        </style>
      </head>
      <body>
        <div id="container">
        <div class="horizontal">
        </div>
        <div class="vertical" style="float:left;">
        </div>
        <div class="vertical" style="float:right;">
        </div>
        <div class="horizontal" style="float:left;" >     
        </div>
        <h1 style="font-size:3em; color:Green; text-align:center;">
             HTML Test page
        </h1>
        </div>
      </body>
    </html>

如何调整我的 CSS 代码以便我可以实现与 (www.bing.com) 相同的集中页面样式？我想在按Ctrl+时集中我的容器 div-

4

3 回答 3

1

它与您使用百分比而不是说像素或 EM 有关

我得到它是为了让它保持居中，但我仍然让它粘在浏览器的顶部。

<html>
  <head>
    <title>
      HTML test page
    </title>
    <style>
      .horizontal{
    width:100%;
    height:100px;
    background-color: #bbb;
      }
      .vertical{
    width:100px;
    height:250px;
    background-color: #bbb;
      }
      #container{
    margin:auto auto;
    width:750px;
    height:400px;
      }
    </style>
  </head>
  <body>
    <div id="container">
    <div class="horizontal">
    </div>
    <div class="vertical" style="float:left;">
    </div>
    <div class="vertical" style="float:right;">
    </div>
    <div class="horizontal" style="float:left;" >     
    </div>
    <h1 style="font-size:3em; color:Green; text-align:center;">
         HTML Test page
    </h1>
    </div>
  </body>
</html>

编辑 您可以使用 MediaQuery 并设置的可能性top:###px，以便页面的其余部分设置为中心。但是您可能必须创建几个 CSS 文件或编写大量 CSS 代码才能使其工作

回答css获取屏幕分辨率的高度

此答案中有一个指向媒体查询的链接，可将您带到 w3.org 媒体查询站点

于 2013-08-16T15:28:44.097 回答
1

我只是检查 bing.com。似乎他们使用 JS 更改了居中 div 的位置和大小。它在页面加载时居中，在调整页面大小时也是如此。并且不要忘记#container的绝对位置。

<script>
$(window).resize(function() {
    doResize();
}

$(document).ready(function(){
    doResize();
}

function doResize() {  
    var windowHeight = $(window).height();
    $('#container').css('top',(windowHeight - $('#container').height())/2);
}

</script>
于 2013-08-16T15:24:40.293 回答
0

在查看了您刚刚推荐给我们的 bing 页面后，我相信这就是您可能想要的

    <html>
      <head>
        <title>
            HTML test page
        </title>
        <style>
body {
    width: 100%;
    height: 100%;
    margin:auto;
}
#container {
    vertical-align: middle;
    margin:auto;
    height:100%;
    width:100%;
    display: table;
}
span {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    font-size:5em;
    color:#fff;
}
#inner {
    margin:auto;
    width:50%;
    height:auto;
    border:100px solid #bbb;
    color:Green;}
        </style>
      </head>
      <body>
    <body>
        <div id="container">
        <div class="horizontal">
            </div>
            <div class="vertical" style="float:left;">
            </div>
            <div class="vertical" style="float:right;">
            </div>
            <div class="horizontal" style="float:left;" >     
            </div>
            <span><div id="inner">HTML Test page</div>
            </span>
        </div>
    </body>
      </body>
    </html>

这将为您的 div 创建一个 100px 大小的边框，该边框根据您的需要居中对齐

于 2013-08-17T03:59:50.323 回答