Using CSS to make sure my Logo is always X ammount of distance away from border.

Question

I'm trying to make sure my web application is always centered on the screen regardless of screen resolution. I've tried:

.Logo
{
    Top:15px;
    Left:50%; 
}

But it's not doing anything really. Any help, wise CSS-Gurus?

Answer 1

you must use position:absolute; for this to work

Answer 2

Try this:

.Logo {
     margin: auto;
     width: 600px; /* or other value */
}

if .Logo is a block level element it should work.

Answer 3

For vertical alignment, you need something like this:

<style type="text/css">
#outer {height: 400px; overflow: hidden; position: relative;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; width: 100%;}

#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
</style>

For horizontal alignment you need something like this

body{text-align:center;}/*fix for ie*/
body *{text-align:left;}
#outer {
  width: 700px ;
  margin-left: auto ;
  margin-right: auto ;
}

On this html:

<div id="outer">
  <div id="middle">
    <div id="inner">
      any text
      any height
      any content, for example generated from DB
      everything is vertically centered
    </div>
  </div>
</div>

Answer 4

.Logo
{
    height:50px;
    width:50px;
    margin-left:auto;
    margin-right:auto;
}

Works in IE6. I can't remember about Firefox as it's such a long time since I did any web development (sigh!).

Answer 5

This might work:

.logo
{
    display:block;
    margin:15px auto;
}

Answer 6

.ff {padding-left:50%; padding-top:50%}