Forums

Eraser35

How can I position my logo to the exact center of the screen?

I would like the logo to be able to scale (slide) in the event the browser window is resized.

Regards.

AshtonSanders

HTML


<div id=\"header\">
     <img src=\"\" alt=\"\" id=\"logo\">
</div>

CSS


#header { text-align: center }
#logo {margin: 0 auto;}

OR...

You can just use plain HTML...

HTML


<center>
     <img src=\"\" alt=\"\">
</center>

Eraser35

So I decided to use this code to position my logo:

<center>
     <img src=\"logo.png\" alt=\"logo\">
</center>

...the above code did in fact place my logo correctly on the y-axis (vertically logo is in the middle of the screen); however the logo's x-axis is budged up against my navigation bar. Just for testing purposes, I tried embedding some padding to see if I could move the logo down, and it worked:

<center>
     <img style=\"padding: 50px\" src=\"logo.png\" alt=\"logo\">
</center>

I would like a more precise method of achieving the absolute center for the x-axis. Any suggestions?

AshtonSanders

"Eraser35" said:
...the above code did in fact place my logo correctly on the y-axis (vertically logo is in the middle of the screen);

Really? I'm pretty sure <center> only works horizontally.

"Eraser35" said:

however the logo's x-axis is budged up against my navigation bar. Just for testing purposes,
<snip>
Any suggestions?


<div>
  <center>
     <img src=\"logo.png\" alt=\"logo\">
  </center>
</div>

Btw, the only real way I know of centering things vertically is making a table cell with valign=middle, and give it 100% height and width... I don't think that will work for resizing though...

Eraser35

Oops! I'm an idiot! I meant to say it positioned my logo on the X-axis correctly. The Y-axis is messed up.

Does this change anything regarding a suggestion?

MaxBlack

Does your header have a fixed height? If so, you could do that :

let's say your logo is 200px x 100px and the height of your header is 200px.


<div id=\"header\">
    <img src=\"logo.png\" alt=\"logo\">
</div>


#header {
    overflow: auto;
    height: 200px;
}

#header img {
    float: left;
    position: relative;
    left: 50%;
    top: 50%
    margin-left: -100px /* Half the width of your image. IE6 will double this measure because it is floated. */
    margin-top: -50px /* Half the height of your image. IE6 will double this measure because it is floated. */
}

georgebrown

Use the center tag or mark the dimensions of your screen calculate it and find out the center.

Cheap Logos Design

BaliBalo

A good trick for centering using pseudo-elements of the parent:
(assuming #element is what you want to center in its parent and #parent its parent)

  #parent
  {
      text-align: center;
  }
  #parent::before
  {
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
  }
  #element
  {
      vertical-align: middle;
  }

A few remarks:
- Don't forget to put html and body height to 100% if you don't have enough content to cover the window.
- It only works on browsers that support pseudo-elements (any modern browser)

treehouse : what would you like to learn today?

Forums

Position Logo In Exact Center Of Screen?