CODEWITHSUNDEEP
htmlcss
Herbert Peters
Herbert Peters

Reputation: 87

Cross Browser Center

I have an element which is an image within a div id. I am going to make this page a under construction page. I made the div with a "margin: auto" css command. What is away vertically that I can have the div auto center to any browser accessed by the site?

New to this don't know how to do the whole JSFiddle thing lol

Heres a url too: http://nerissagrigsby.com/?page_id=5

My CSS:

#openpagesig {
width: 803px;
height: 283px;
margin: auto;
}

My HTML:

<body>
<div id="openpagesig">
    <img src="img/LoginSignature.png" width="803" height="283" alt="Login Signature"
    />
</div>
<!-- Open Page Signature -->
</body>

Upvotes: 0

Views: 1647

Answers (4)

Oleg
Oleg

Reputation: 9359

Have you tried the following CSS:

.inTheMiddle { /* or "#myImageId" (or just "img" if it's the only one) */
    position: absolute; /* or "fixed" */

    /* The element you want to place in the middle of the page
       center should have explicitly defined dimensions: */
    width: 100px;
    height: 100px;

    top: 50%;
    margin-top: -50px; /* offset back at exactly half height of the element */
    left: 50%;
    margin-left: -50px; /* offset back at exactly half width of the element */
}

Here's a working example.

Do I need to mention, that this works even in Internet Explorer 5.5! ... but I doubt this browser is still relevant to anyone.

Please refer to the image below to see how the negative margins help:

How negative margins work to offset an element

Upvotes: 3

Seer
Seer

Reputation: 5237

Personally I use something like this:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  </head>
  <body>

    <div class="container">
        <div class="container-content">
            <div class="content">
              <img src="//placehold.it/803x283" />
            </div>
        </div>
    </div>
  </body>
</html>


<style>

  html, body {
    height: 100%;
  }

  .container {
    display: table;
    width: 100%;
    height: 100%;
    margin: auto;
  }

  .container-content {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
  }

  .container-content > .content {
    max-width: 803px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

</style>

This solution works very nicely, because not only does it vertically center the content, but if the browser windows height is too small to display it all, you can still scroll to see all of the content which is one of the major drawbacks of using other methods.

Example:

http://jsbin.com/owayec/2/

Upvotes: 0

Joey
Joey

Reputation: 1679

The problem you're having is related to vertically aligning div elements on a page. This is a common problem in HTML and CSS coding.

One solution is to have a container element within an outer div tag. The outer div should be set to display: table; and position: fixed; with 100% width and height as well. Set the inner div to display: table-cell; with the vertical-align: middle; property.

Furthermore, the outer div should have text-align: center; in order to center its child elements.

Here is the code you need:

.outer { 
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
  position: fixed;
}
.container {
  display: table-cell;
  vertical-align: middle;
}

An example from jsbin: http://jsbin.com/otolot/1/

Try resizing the window to see that this works.

Upvotes: 0

cms_mgr
cms_mgr

Reputation: 2017

Try something like:

.centeredDiv {
    width:17em;
    height:9em;
    position:absolute;
    left:50%;
    top:50%;
    margin:-135px 0 0 -155px;
    padding:1em;
    background-color:#fffff7;
    opacity:0.67;
    filter:alpha(opacity=67); /* for IE8 and earlier */
    border:2px solid #191919;
}

Obviously editing measurements and colours to suit.

Upvotes: 0

Related Questions