0

I've a html page with some div tags in it, I want to put my container div in center of computer screen whether I zoom-in or zoom-out.

I want to modify my html page in such a manner as www.bing.com. The homepage centers on the screen when you zoom-out, whereas, my web page continuously expands while zooming.

My HTML pagecode:

 <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>

How to adjust my CSS code so that I can implement centralized page style same of (www.bing.com)? I want to centralize my container div on pressing Ctrl+-

brasofilo
  • 25,496
  • 15
  • 91
  • 179
User97987
  • 3
  • 1
  • 2

3 Answers3

1

I just check bing.com. It seems they change position and size of their centered div using JS. It centered while page load and the same when page is re-sized. And do not forget absolute position for #container.

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

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

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

</script>
user2443795
  • 144
  • 7
  • I should really appreciate for your jQuery skills, but I'd like to do that with CSS only, Anyways... THanks – User97987 Aug 16 '13 at 15:32
  • If you want use only HTML + CSS, you can try make table 3x3 and put your DIV into the center cell. As far I know, there no good solution for vertical align in block layout. – user2443795 Aug 16 '13 at 18:57
1

it has something to do with you using percentages rather than say Pixels or EMs

I got it so that it is staying centered but i still have it sticking to the top of the browser.

<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>

Edit possibility you could use a MediaQuery and set the top:###px so that the rest of your page sets up with the center. but you would probably have to create several CSS Files or write a lot of CSS code to make it work

Answer to css get height of screen resolution

this answer has a link in it to media queries that takes you to w3.org Media Queries site

Community
  • 1
  • 1
Malachi
  • 3,205
  • 4
  • 29
  • 46
  • Thanks, But I'd like you to go to www.bing.com, because I want to center my whole div, your code is really helpful but it centered it from top side, I want my div to be in center of browser, not in top – User97987 Aug 16 '13 at 15:36
  • there is a `vertical-align` in CSS but I can't for some reason get it to work on the Div inside the body tag. you are going to have to use some form of Javascript to accomplish exactly what is going on there I think – Malachi Aug 16 '13 at 15:38
  • Hmm... Okay I am searching for it.. anyways thanks for your kind help – User97987 Aug 16 '13 at 15:40
  • I edited my answer. I am not sure that Media Queries will work with zooming though? figured it was worth a shot. – Malachi Aug 16 '13 at 15:47
0

After looking that bing page you just referred us, I believe this is what you probably want this

    <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>

This creates a 100px sized border to your div, which is aligned in center as you want

navin
  • 16
  • 3