Skip to content Skip to sidebar Skip to footer
Home / Centering / Css / Html

How To Center A Div Tag In A Html Page Without Being Affected By Zooming

Post a Comment
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

Solution 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();
}

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

</script>

Solution 2:

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><divid="container"><divclass="horizontal"></div><divclass="vertical"style="float:left;"></div><divclass="vertical"style="float:right;"></div><divclass="horizontal"style="float:left;" ></div><h1style="font-size:3em; color:Green; text-align:center;">
         HTML Test page
    </h1></div></body></html>

Editpossibility 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

Solution 3:

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><divid="container"><divclass="horizontal"></div><divclass="vertical"style="float:left;"></div><divclass="vertical"style="float:right;"></div><divclass="horizontal"style="float:left;" ></div><span><divid="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

Post a Comment for "How To Center A Div Tag In A Html Page Without Being Affected By Zooming"