CODEWITHSUNDEEP
htmlcsscentering
User97987
User97987

Reputation: 3

How to center a div tag in a html page without being affected by zooming

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

Upvotes: 0

Views: 8471

Answers (3)

navin
navin

Reputation: 16

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

Upvotes: 0

Malachi
Malachi

Reputation: 3221

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

Upvotes: 1

user2443795
user2443795

Reputation: 138

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>

Upvotes: 1

Related Questions